title: AngularJS string input for ngModel
body: <p>I am importing label / input information from a JSON file in order to try and reduce the size of the HTML and make it easier to modify in the future. Part of this means I am using string inputs for ngModel. </p>
  
  <p>The trouble is with the two-way binding not acting as expected. I've seen a few threads where directives are used to help this along, but I cannot get it to work. </p>
  
  <p>Fiddle example: <a href="http://jsfiddle.net/kelh/LLuwka8h/" rel="nofollow noreferrer">http://jsfiddle.net/kelh/LLuwka8h/</a></p>
  
  <hr>
  
  <p><strong>Edit</strong>: Fiddle example updated: <a href="http://jsfiddle.net/kelh/6vccr206/" rel="nofollow noreferrer">http://jsfiddle.net/kelh/6vccr206/</a></p>
  
  <p>When changing the select tag from "first" to "second", modifying the second text box (string input) will not be bound to the correct value of num2, but instead will modify num1.</p>
  
  <hr>
  
  <p>JS Code:</p>
  
  <pre><code>var app = angular.module('myApp',[]);
  
  app.controller('MyCtrl', ['$scope',  function($scope) 
  {
          $scope.calc = {num1:100, num2:350};
      $scope.num1 = 100;
      $scope.num2 = 350;
  
      $scope.labels = {
          selected: null,
        options: [
          {id: 0, name: 'first'},
          {id: 1, name: 'second'}
        ]
      };
      $scope.labels.selected = $scope.labels.options[0];
  
      $scope.itemsPlaceholder = [{"label":"First One", "model":"calc.num1"}, {"label":"Second one", "model":"calc.num2"}];
  
      $scope.items = [$scope.itemsPlaceholder[0]];
  
      $scope.change = function()
      {
          var id = $scope.labels.selected.id;
          $scope.items = [$scope.itemsPlaceholder[id]];
      }
  }]);
  
  app.directive('ngBindModel',function($compile){
      return {             
          link: function(scope,element,attr){
  
              element[0].removeAttribute('ng-bind-model');
              element[0].setAttribute('ng-model',scope.$eval(attr.ngBindModel));
              $compile(element[0])(scope);
          }
      };
  });
  
  app.directive('stringToNumber', function($compile) {
      return {
          require: 'ngModel',           
          link: function(scope, element, attrs, ngModel) {
              /*
              ngModel.$parsers.push(function(value) {
                  return '' + value;
              });
              //*/
              ngModel.$formatters.push(function(value) {
                  return parseFloat(value);
              });
          }
      };
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="MyCtrl"&gt;
  
    num1: {{calc.num1}} &lt;br&gt; num2: {{calc.num2}}
  
    &lt;br&gt;&lt;BR&gt;
  
    {{labels.selected.options.id}}
    &lt;label&gt;Select: &lt;/label&gt;
    &lt;select ng-model="labels.selected" ng-options="options.name for options in labels.options track by options.id" ng-change="change();"&gt;
    &lt;/select&gt;
    &lt;BR&gt;&lt;BR&gt;&lt;BR&gt;
  
    &lt;i&gt; "normal" usage of ngModel -- &lt;/i&gt;
    &lt;div ng-show="labels.selected.id == 0"&gt;
      &lt;label&gt;{{items[0].label}}  (model is: num1) &lt;/label&gt;&lt;br&gt;
      &lt;input type="number" name="inp{{$index}}" ng-model="calc.num1"/&gt;
    &lt;/div&gt;
  
    &lt;div ng-show="labels.selected.id == 1"&gt;
      &lt;label&gt;{{items[1].label}}  (model is: num2) &lt;/label&gt;&lt;br&gt;
      &lt;input type="number" name="inp{{$index}}" ng-model="calc.num2"/&gt;
    &lt;/div&gt;
  
    &lt;br&gt; &lt;i&gt; string input for ngModel -- &lt;/i&gt;
    &lt;div ng-repeat="item in items track by $index"&gt;
      &lt;label&gt;{{item.label}}  (model is: {{item.model}}) &lt;/label&gt;&lt;br&gt;
      &lt;input type="number" name="inp{{$index}}"
        string-to-number ng-model="this[item.model]" ng-bind-model="item.model" /&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>