title: Angular directive taking no effect
body: <p>I am new to angular and I am trying to build my first directive, but it's not rendering inside my HTML. </p>
  
  <p>Here is my HTML page : the directive is called at the bottom of the HTML </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html ng-app="store"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
          &lt;script type="text/javascript" src="angular.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-controller="storeController as store"&gt;
      &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item" ng-repeat="product in store.product"&gt;
              &lt;h3 &gt;
                  &lt;product-name&gt;&lt;/product-name&gt;
              &lt;/h3&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my app.js : </p>
  
  <pre><code>(function(){
  var app = angular.module("store",[]);
  var gem = [
      {
      name: "Dodec",
      price: 2.95,
      canPurchase: true,
      soldOut: false,
      reviews: []
      },
      {
      name: "Panta",
      price: 20.4,
      canPurchase: true,
      soldOut: false,
      reviews: []
      }
  ];
  app.controller("storeController",function(){
      this.product = gem;
  });
  
  app.controller("tabController",function($scope){
      $scope.tab = 1;
      $scope.SetTab = function(value){
          $scope.tab = value;
      };
  
      $scope.IsSet = function(value){
          return value === $scope.tab;
      }
  });
  
  app.controller("ReviewController", function($scope){
      $scope.review = "";
  
      $scope.addReview = function(product){
          product.reviews.push($scope.review);
          $scope.review = "";
      };
  
  });
  
  app.directive("productName",function(){
      return {
          restrict : "E",
          templateUrl : "product-name.html"
      };
  });
  
  
  
  
  })();
  </code></pre>
  
  <p>notice the directive at the end. </p>
  
  <p>And finally here is my product-name.html file : </p>
  
  <pre><code>{{product.name}}
  &lt;em class="pull-right"&gt; {{product.price | currency}}&lt;/em&gt;
  </code></pre>
  
  <p>What did I do wrong? why is the directive not behaving like it should? </p>
  
  <p>Thanks</p>