title: scope variable is null in angular directive link function
body: <p>I'm begginer in angularjs. I have an angular directive and using it ASP.NET MVC project:</p>
  
  <pre><code>'use strict';
  app.directive('province', function (Province, $rootScope) {
  return {
      restrict: 'E',
      replace: true,
      template: '&lt;select data-ng-model="province" data-ng-options="province.provinceId as province.provinceName for province in provinces" ' +
          'data-ng-change="provinceChanged()"&gt;&lt;/select&gt;',        
      link: function (scope, element, attr, controller) {            
          Province.get().then(function (provinces) {                
              scope.provinces = provinces;
          });
          console.log(scope.provinces);
          scope.province = false;            
          scope.provinceChanged = function () {
              if (!scope.province) {
                   return;
              }
              $rootScope.$broadcast("provinceChanged", { province: scope.province });
          };
      }        
  };
  })
  </code></pre>
  
  <p>This is the way I use it:</p>
  
  <pre><code>&lt;province id="province" class="form-control" data-selected-province="@Model.Province"/&gt;
  </code></pre>
  
  <p>The select element shows provinces corrctly. Now I want to set a default value for select element. So I use attribute <code>data-selected-province</code> and set it to the value that I get from server(<code>@Model.Province</code>). I think I should loop through <code>scope.provinces</code> and find the index of the province whose <code>provinceId</code> is equal to <code>data-selected-province</code> attribute and set <code>scope.province</code> which is <code>ng-model</code> to that index. But <code>scope.provinces</code> is <code>undefined</code> when I print it to the console using <code>console.log</code>. I have two questions: </p>
  
  <ol>
  <li>why <code>scope.provinces</code> is null?   </li>
  <li>Is this the correct way of setting
  default value?</li>
  </ol>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I was a bit confused. The only thing I need to do is set <code>scope.province</code> to <code>attr.selectedProvince</code>. But I still have a problem. When I set <code>scope.province</code> to a constant number like <code>scope.province = 8</code> it works fine but when I set <code>data-selected-province = 8</code> it does not work. I can see in firebug that this attribute is equal to 8 when rendering the directive.</p>
  
  <p>Any help is appreciated in advance.</p>