title: angular does not load my directive
body: <p>I newly start to use angular.but I have some problem to loading my directive.
  I want to load my directive as soon as page loaded.</p>
  
  <p>where I load data-show directive</p>
  
  <pre><code>        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;article class="row" ng-controller="DataCtrl"&gt;
                  &lt;input type="button" ng-click="getDataList()" &gt;
                  &lt;h1&gt;Some Content Here&lt;/h1&gt;
                  &lt;ul id="home" bread-crumbs&gt;&lt;/ul&gt;
                  &lt;ul class="thumbnails"&gt;
                      &lt;li ng-repeat="data in list" class="col-md-5"&gt;
                          &lt;show-data data="data"/&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/article&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>showData directive:</p>
  
  <pre><code>app.directive('showData', function () {
  return{
      restrict: 'E',
      replace:true,
      templateUrl: 'views/directives/datas.directive.html',
      scope: {
          data: "="
      },
      controller:'DataCtrl'
  
  }
  </code></pre>
  
  <p>})</p>
  
  <p>and template I used in:</p>
  
  <pre><code>    &lt;div class="well hoverwell"&gt;
      &lt;div class="row"&gt;
          &lt;h2 class="col-md-4"&gt;{{data.name}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;span class="col-md-1"&gt;Code:&lt;/span&gt;
          &lt;span class="col-md-1"&gt;{{data.id}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;span class="col-md-1"&gt;accountability:&lt;/span&gt;
          &lt;span class="col-md-1"&gt;{{data.parent}}&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;span class="col-md-1"&gt;&amp;nbsp;:&lt;/span&gt;
          &lt;span class="col-md-1"&gt;{{data.definition}}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my controller</p>
  
  <pre><code>'use strict';
  
  angular.module('app')
      .controller('DataCtrl', function ($scope, DataService, $log) {
  
          $scope.getDataList = function () {
              var list = DataService.getDataList(1);
              list.then(
                  function (result) {
                      $log.info(result);
                      $scope.dataList = result;
  
                  }, function (status) {
                      $log.error(status)
                      $scope.msg = "error " + status + " has been occur,please report to admin ";
                  });
          };
  
      });
  </code></pre>
  
  <p>and when I run my app it does not work .
  when I watch it in chorome development tools my directive is comment</p>
  
  <p><img src="https://i.stack.imgur.com/usnuP.jpg" alt="enter image description here"></p>
  
  <p>what is my problem.How can I call this directive as soon as page load.
  thx</p>