controller.js

mainApp.controller('groceriesStoreController', function($scope) {
   $scope.sugar = {};
   $scope.sugar.name = "Sugar";
   $scope.sugar.stock  = 10;
   
   $scope.pasta = {};
   $scope.pasta.name = "Pasta";
   $scope.pasta.stock  = 35;
});

directive.js

var mainApp = angular.module("groceriesStoreApp", []);

mainApp.directive('item', function() {
   var directive = {};
   
   //restrict = E, signifies that directive is Element directive
   directive.restrict = 'E';
   
   //template replaces the complete element with its text. 
   directive.template = "Item: <b>{{item.name}}</b> , Roll No: <b>{{item.stock}}</b>";
   
   //scope is used to distinguish each student element based on criteria.
   directive.scope = {
      item : "=name"
   }
   
   //compile is called during application initialization. AngularJS calls it once when html page is loaded.
	
   directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");
      
      //linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
         element.html("Item: <b>"+$scope.item.name +"</b> , Stock: <b>"+$scope.item.stock+"</b><br/>");
         element.css("background-color", "#ff00ff");
      }
      return linkFunction;
   }
   return directive;
});

directives.html

<divng-app="groceriesStoreApp" ng-controller="groceriesStoreController">

  <item name="sugar"></item>
  <br />
  <item name="pasta"></item>

</div>