title: How to have a read and an edit view of an input field in angularJS
body: <p>I'm trying to have an edit view and a read view of an input field.
  The objective is to edit a number without any kind of format but show it with some specific spacing and decimal places.</p>
  
  <p>To do that I'm using 2 fields but only showing one at any given time.</p>
  
  <p>I also need to save the input value if it has been changed so im using ng-change and ng-model-options="{updateOn: 'blur'}" so that i don't do a save request in every key press.</p>
  
  <p>The problem is I keep getting this error "Cannot read property '$$phase' of null"</p>
  
  <p>I leave here a simplified example of my code (although in this website it seems not to show the error, and just misses the item.isInEditMode update)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('Appp', []);
          app.controller('metadataCtrl', function ($scope, $http) {
              $scope.vm = { myItems : {} }
  
              $scope.vm.myItems = [ {type: "a", value: 34.5},
                                    {type: "a", value: 12.5},
                                    {type: "b", value: 3.15} ];
  
              $scope.setEditMode = function ( item, val ) {
                 item.isInEditMode = val;
              }
  
              $scope.saveValue = function ( rowRate ) {
                             //do something
              }
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;form ng-app="Appp" name="myForm" ng-controller="metadataCtrl"&gt;
     
            &lt;div ng-repeat="item in vm.myItems"&gt;
                &lt;input type="number"
                     ng-if="!item.isInEditMode"
                     ng-focus="setEditMode(item, true)"
                     ng-value="item.value | number : 2"
                     step="0.01"
                     max="99999999999999"
                     min="0"
                     step-message="{name} can only have a maximum of 2 decimal places"/&gt;
              &lt;input type="number"
                     ng-if="item.isInEditMode"
                     step="0.01"
                     max="99999999999999"
                     min="0"
                     step-message="{name} can only have a maximum of 2 decimal places"
                     ng-blur="setEditMode(item, false)"
                     ng-model="item.value"
                     ng-change="saveValue( item )"
                     ng-model-options="{updateOn: 'blur'}"/&gt;
            &lt;/div&gt;
     &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>edit:
  if i use just the ng-blur and check if the input.$changed to check if I call my function or not does overcome the $$phase error.</p>
  
  <p>But I still cant focus the hidden input</p>