title: ngModel not updating in select
body: <p>I have a directive rendering inputs based on a configuration sent by the server. Everything is working great except for the 'select' input.
  No matter what I try, the ng-model does not update.
  I have trimmed my code a lot to isolate the problem :</p>
  
  <p>Javascript : </p>
  
  <pre><code>var myApp = angular.module('example', []);
  
      myApp.factory('DynamicData', [function() {
           return {
              data: {
                backup_frequency: 604800
              }
          };
  
      }])
      .directive('dynamicInput',
          ['$compile', 'DynamicData', function($compile, DynamicData) {
  
              /**
               * Render the input
              */
              var render = function render() {
                  var input = angular.element('&lt;select class="form-control" ng-model="inner.backup_frequency" ng-options="option.value as option.title for option in options"&gt;&lt;/select&gt;');
                  return input;
              };
  
              var getInput = function ()
              {
                  var input = render();
                  return input  ? input[0].outerHTML : '';
              };
  
              var getTemplate = function(){
  
                  var template = '&lt;div class="form-group"&gt;' +
                                  'Select input ' +
                                  '&lt;div class="col-md-7"&gt;' + getInput() + '&lt;/div&gt;' +
                              '&lt;/div&gt;';
                  return template;
              }; 
  
              return {
                  restrict : 'E',
                  scope: {
                      content:'=content',
                  },
  
                  link : function(scope, element, attrs) {
                      var template = getTemplate();
  
                      scope.options = [
                        {title: "Daily", value: 86400},
                        {title: "Weekly", value: 604800},
                        {title: "Monthly", value: 2678400},
                        ];
                      scope.inner = DynamicData.data;
                      console.info('inner data', scope.inner);
  
                      element.html(template);
                      element.replaceWith($compile(element.contents())(scope));
  
  
                  }
              };
        }])
        .controller('FormCtrl', ['DynamicData', '$scope', function (DynamicData, $scope){
          $scope.app = {};
  
          $scope.save = function save() {
            $scope.value = DynamicData.data.backup_frequency;
            console.info('DynamicData', DynamicData.data);
          };
        }]);
  </code></pre>
  
  <p>HTML :
      
      </p>
  
  <pre><code>  &lt;head&gt;
      &lt;script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"&gt;&lt;/script&gt;
      &lt;link href="style.css" rel="stylesheet" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h1&gt;Dynamic Input :&lt;/h1&gt;
      &lt;div data-ng-controller="FormCtrl"&gt;
        &lt;dynamic-input class="form-group" content="app"&gt;&lt;/dynamic-input&gt;
        &lt;span data-ng-bind="value"&gt;&lt;/span&gt;&lt;br/&gt;
        &lt;button class="btn btn-primary" ng-click="save()"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>A working plunker is available : <a href="http://plnkr.co/edit/mNBTJzZXjX6mLyPz6NCI?p=preview">http://plnkr.co/edit/mNBTJzZXjX6mLyPz6NCI?p=preview</a></p>
  
  <p>Do you have any ideas why the ng-model in the select is not updated ?</p>
  
  <p>EDIT : What I want to achieve is updating the variable "inner.backup_frequency" (the reference to my data object returned by my factory DynamicData). As you can see in the plunker, whenever I change the option in the select, the variable contained in the ng-model is not updated.</p>
  
  <p>Thank you for your time.</p>