title: AngularJS: input type=number" parse ngModel string value to number and back
body: <p>I am pretty new to angularJs. My problem is:</p>
  
  <p>My model data are kept in a database and if a project is reopened the data is displayed. With save the data are stored again in the database. I have a problem with displaying the number with
   since the value is stored as a string and must be parsed to an integer.</p>
  
  <p>Here is the html:</p>
  
  <pre><code> &lt;numeric-input numericbinding="item.showInt" ng-model="item.operandvalue" &gt;&lt;/numeric-input&gt;
  </code></pre>
  
  <p>Depending on the format of the item value (bool, int, string), the operandvalue is displayed in different ways. This is directed with the value of numericbinding.</p>
  
  <p>I tried to use the following directive to parse the string to an int:</p>
  
  <pre><code>.directive('numericInput', function () {
      return {
          restrict: 'E',
          require: 'ngModel',
          scope: {
              model: '=ngModel',
              numericbinding: '='
          },
          template: '&lt;input id="integerType" type="number" ng-model="intValue" ng-hide="!numericbinding" &gt;',
          link: function (scope) {
              //avoid that string and bool is parsed,  showInt is false
              if (scope.numericbinding === false || scope.numericbinding === undefined) {
                  return;
              }
  
             scope.intValue = parseInt(scope.model, 10);
  
          }
      };
  })
  </code></pre>
  
  <p>This way the number is displayed correctly. But if I want to store my data again for the bound item.operandvalue I get a Nullpointer in the backend. I understand that I need to convert the number back to a string. I tried multiple ways,e.g.</p>
  
  <ul>
  <li>ng-change: But it never got in the given function.</li>
  </ul>
  
  <p>Then I wanted to use ngModelController with formatter and parser as described in <a href="https://stackoverflow.com/questions/15901889/angularjs-formatting-ng-model-before-template-is-rendered-in-custom-directive">AngularJS - Formatting ng-model before template is rendered in custom directive</a></p>
  
  <pre><code>.directive('numericInput', function () {
      return {
          restrict: 'E',
          require: 'ngModel',
          scope: {
              model: '=ngModel',
              numericbinding: '='
          },
          template: '&lt;input id="integerType" type="number" ng-model="item.operandvalue" ng-hide="!numericbinding" &gt;',
          link: function (scope, ngModelController) {
              //avoid that string and bool is parsed,  showInt is false
              if (scope.numericbinding === false || scope.numericbinding === undefined) {
                  //console.log('not a number - return');
                  return;
              }
  
              ngModelController.$formatters.unshift(function(valueFromModel) {
                  return parseInt(valueFromModel, 10);
             });
  
              ngModelController.$parsers.push(function(valueFromInput) {
                  return valueFromInput.toString();
              });
  
          }
      };
  })
  </code></pre>
  
  <p>However, the valueFromModel is undefined. The number is not displayed at all. Also scope.item.operandvalue is undefined. In Chrome the error is: TypeError: Cannot read property 'operandvalue' of undefined.</p>
  
  <p>I think that I should keep the item.operandvalue, which is data bound, as a string and display the int value with a different name. In my first way it seems that item.operandvalue gets a number and the data binding does not work any longer.</p>
  
  <p>How can I fix my problem? Many thanks for any help!</p>