title: Select Tag Data Bind Issue In AnjularJS
body: <p>I have a strange Issue in Angular JS, where I am not able to data bind data to a Select control. Let me explain the issue.
  I am dynamically creating controls in my application, all the information that is needed to create the controls comes from the data base. Like control type(textbox,checkbox dropdown list), control style, control ng-model name, control ng-options name etc. The control is build through directives in angular. Now the controls get created and get data bind through the ng-model. But for select tag the ng-model does not work. The code follows:</p>
  
  <pre><code>app.directive('controlTemplate', ['$compile', function ($compile) {
  
  var templatetext = '';
  function linker(scope, element, attrs, ngModelController) {
      scope.checkbocchecked = 1;
      switch (scope.pctDef.FieldType) {
          case 'TextTemplateControl':
              templatetext = '&lt;input type="text" style="' + scope.pctDef.Style + '" id="' + scope.pctDef.FieldInternalName + '" name="' + scope.pctDef.FieldInternalName +
                             '" data-ng-model="' + scope.pctDef.NgModel + '" data-ng-required="true" required /&gt;&lt;br /&gt;&lt;span class="fieldDesc"&gt;' +
                              scope.pctDef.Description + '&lt;/span&gt;';
              break;
          case 'DropDownTemplateControl':
              ngModelController.$formatters.push(function ($modelValue) {
                  var newvar = parseInt(val, 10);
                  return newvar;
              });
              templatetext = '&lt;select style="' + scope.pctDef.Style + '" id="id' + scope.pctDef.FieldInternalName + '" name="' + scope.pctDef.FieldInternalName +
                             '" data-ng-model="' + scope.pctDef.NgModel + '" data-ng-options="' + scope.pctDef.NgOptions + '" data-ng-required=""&gt;&lt;option selected="selected" value=""&gt;Select...&lt;/option&gt;&lt;/select&gt;&lt;input type="hidden" value="{{ ' + scope.pctDef.NgModel + '}}"  /&gt;';
              break;
          }
  
          element.html(templatetext);
          $compile(element.contents())(scope);
      }
  
      return {
          restrict: "A",
          link: linker,
          require: 'ngModel',
          scope: {
              pctDef: '=',
              moduleData: '=',
              itemData: '='
          }
      };
  }]);
  </code></pre>
  
  <p>The directive is called in the HTML file, like this 
          </p>
  
  <p>All the data that needs to bind, is passed in the scope variable <code>itemData</code>, as <code>itemData</code> is a object of values, which property name of the object (<code>itemData</code>)  needs to be data bind with the select control is passed through the scope variable <code>pctDef</code>.
  Not let's say the textbox needs to filled with value <code>"Mike"</code>, then this value should be passed to the scope variable <code>itemData</code>. Let say the value resides in <code>itemData</code> property <code>"Name"</code>, therefore the <code>ng-model</code> will look like <code>ng-model="itemData.Name"</code>. Now, this scope variable name <code>itemData.Name</code>, comes from the database. The database passes angular JS the name of this variable <code>itemData.Name</code>, as a string variable. And the that string variable is <code>scope.pctDef.NgModel</code>.
  So, <code>scope.pctDef.NgModel</code> is a string property that holds the string value <code>itemData.Name</code> and <code>itemData.Name</code> is the name of the scope object that needs to be data bind.
  This works perfectly well with textbox not not when it is a drop down list. 
  To cross check things I have placed a hidden control just out side the select control and used the same object to data bind, the hidden controls gets data bind to the correct value by angular but not the select control.</p>