title: How to refresh contents of a tree when using Angularjs directive?
body: <p>Here is a sample of a tree-view using Angularjs directive in <a href="http://plnkr.co/edit/4XDbpDV7E2nahzSgHsZZ?p=preview" rel="nofollow">Plunker</a>.</p>
  
  <p>Part of the code:</p>
  
  <pre><code>.directive('treeView', ['$compile', function($compile) {
    return {
      restrict: 'E',
      scope: {
        value: '=',
        key: '=',
        filter: '=',
        idx: '='
      },
      link: function(scope, element, attrs) {
        var value = scope.value
        scope.curValue = scope.value;
        console.log(scope.curValue)
  
        var template =
          '&lt;ul&gt;' +
            '&lt;li&gt;{{key}}&lt;/li&gt;' +
            '&lt;li class="inner-node" ng-repeat="(k,v) in curValue"&gt;' +
              '&lt;i class="collapsed" ng-show="haschildren(v)" ng-class="{\'list-plus\':!k' + "open" + '}" ng-click="k' + "open" + '=!k' + "open" + '"&gt;&lt;/i&gt;' +
              '&lt;span class="" ng-click="seeAll(k)"&gt;{{k}}&lt;/span&gt;' +
            '&lt;/li&gt;' +
          '&lt;/ul&gt;';
        scope.haschildren = function(obj) {
          return !$.isEmptyObject(obj)
        };
        scope.seeAll = function(key) {};
        element.html('').append($compile(template)(scope));
      }
    };
  }]);
  </code></pre>
  
  <p>I want to change tree nodes by click switch button which set scope.fields a new value.</p>
  
  <p>But after click there is nothing changed.
  I think it was because I use link method in a wrong way, but I don't know what the right way is.</p>
  
  <p>What should I do?</p>