title: Angularjs Model Array Not updating with Template
body: <p>I've created the template with the below code. The edit functionality works fine however the model is updating back.</p>
  
  <p>In the template, I've binded the model with <code>ng-model</code> but still it is not updating the model <code>hobbies</code> back on editing</p>
  
  <p>Any ideas?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;
  Angular Edit Template
  &lt;/title&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous"&gt;
  
  &lt;script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.js"&gt;&lt;/script&gt;&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  angular.module('myApp', [])
      .controller('myCtrl', function($scope){
          $scope.hobbies = ["Swimming", "Reading"]
      })
      .directive('component', function(){
            return {
               template: [
                 '&lt;div&gt;',
                 '&lt;span ng-show="!editing"&gt;{{ value }} &lt;i ng-click="editing = true" class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;&lt;/span&gt;',
                 '&lt;span ng-show="editing"&gt;&lt;input type="input" ng-model="value"&gt;&lt;i ng-click="editing = false" class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/span&gt;',
                 '&lt;/div&gt;'  
               ].join(''),
               restrict: 'E',
               scope: {
                  value: '=value'
               },
               link: function($scope){
                   $scope.editing = false;
               }
            }
      });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="test" ng-app="myApp" ng-controller="myCtrl"&gt;
  
      &lt;ul ng-repeat="n in hobbies"&gt;
      &lt;li&gt;
      &lt;component value="n"&gt;&lt;/component&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
  
  
      &lt;span&gt;{{ hobbies }}&lt;/span&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>