Why doesn't the directive work?

Question

Angular

Hello, tell me why the directive does not work?

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

app.controller('MainController', ['$scope', function($scope) {
  $scope.apps = [ 
    { 
      icon: 'img/move.jpg', 
      title: 'MOVE', 
      developer: 'MOVE, Inc.', 
      price: 0.99 
    }, 
    { 
      icon: 'img/shutterbugg.jpg', 
      title: 'Shutterbugg', 
      developer: 'Chico Dusty', 
      price: 2.99 
    },
    {
      icon: 'img/gameboard.jpg',
      title: 'Gameboard',
      developer: 'Armando P.',
      price: 1.99
    },
    {
      icon: 'img/forecast.jpg',
      title: 'Forecast',
      developer: 'Forecast',
      price: 1.99
    }
  ];

  app.directive('appInfo', function() { 
    return { 
      restrict: 'E', 
      scope: { 
        info: '=' 
      }, 
      templateUrl: 'template/text.html' 
    }; 
  });
}]);

<div ng-repeat="app in apps">
      <app-info info="app"></app-info>
    </div>

text.html

<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p>

Answer 1

You have a typo in your java script.
For some reason, the directive is declared inside the controller. If you take it to a higher level, then everything will work