ng-repeat return blank page [Angular]

Question

It should display list of products but this return blank page.... Anyway if I don't use ng-repeat it works fine... Could someone find what is wrong with this code?

HTML

<div ng-controller="directiveController as directive">
    <div ng-repeat="dir in directive.directives">
        <h1>{{ directive.dir.name }}</h1>
        <span>{{ directive.dir.description }}</span>
        <b>{{ directive.dir.price }}</b>

        <button ng-show="directive.dir.canPurchase">Add to Cart</button>
    </div>
</div>  

JS

var app = angular.module('gemStore', []);

app.controller('directiveController' ,function(){
    this.directives = gems;
});

var gems = 
  [{
      name: 'Produkt 1',
      price: '20 e',
      description:'Na lageru i mozes se poruciti',
      canPurchase: true,
      soldOut: true
  },
  {
      name: 'Produkt 2',
      price: '30 e',
      description:'Nema ga',
      canPurchase: false,
      soldOut: true
  },
  {
      name: 'Produkt 3',
      price: '35 e',
      description:'Trenutno se ne moze poruciti jer je canPurchase false',
      canPurchase: false,
      soldOut: true
  }
  ];

Answer 1

I think the right syntax is

<div ng-repeat="dir in directive.directives">
    <h1>{{ dir.name }}</h1>
    <span>{{ dir.description }}</span>
    <b>{{ dir.price }}</b>

    <button ng-show="dir.canPurchase">Add to Cart</button>
    </div>

Answer 2

 var app = angular.module('gemStore', []); app.controller('directiveController' ,function($scope){ $scope.directives = gems; }); var gems = [{ name: 'Produkt 1', price: '20 e', description:'Na lageru i mozes se poruciti', canPurchase: true, soldOut: true }, { name: 'Produkt 2', price: '30 e', description:'Nema ga', canPurchase: false, soldOut: true }, { name: 'Produkt 3', price: '35 e', description:'Trenutno se ne moze poruciti jer je canPurchase false', canPurchase: false, soldOut: true } ]; 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="gemStore"> <div ng-controller="directiveController"> <div ng-repeat="dir in directives"> <h1>{{ dir.name }}</h1> <span>{{ dir.description }}</span> <b>{{ dir.price }}</b> <button ng-show="dir.canPurchase">Add to Cart</button> </div> </div> </div>