title: AngularJS Directive - How to refresh template after async data load
body: <p>I forked and edited a plunker from <a href="https://stackoverflow.com/questions/14619884/angularjs-passing-object-to-directive">this question</a>  </p>
  
  <p>What I'm trying to do is to get the SELECT element (combo box) to update/populate once the data has loaded, but something is not right.  I retrieve the data, and it is on the scope of the SELECT element, but the template is not refreshing to show the data.   Could someone <a href="http://plnkr.co/edit/RDBSohO3D9m3QooIFH0K" rel="nofollow noreferrer">have a look</a> for me and tell my why the template doesn't refresh?</p>
  
  <p>Thanks very much.</p>
  
  <p>The directive:</p>
  
  <pre><code>app.directive('walkmap', function() { 
    return {
      restrict: 'A',
      transclude: true,
      scope: { walks: '=walkmap' },
      template: '&lt;select data-ng-options="w.postalCode for w in walks"&gt;&lt;/select&gt;',
      link: function(scope, element, attrs)
      {
        scope.$watch('walks', function (walks) {
                  scope.walks = walks;
                  console.log('watch triggered');
                  console.log(scope.walks);
  
  
              });
  
      }
    };
  });
  </code></pre>
  
  <p>The Index.html:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;h1&gt;The Walks Data:&lt;/h1&gt;
      &lt;div walkmap="store.walks"&gt;&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>