Custom AngularJS Directive

HTML

<div ng-app="app">
    <div ng-controller="customDirEx">            
         <student-info ng-repeat="user in users" user="user" on-init-ele="onChangeFoo"></student-info>               </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('customDirEx', ['$scope', function ($scope) {
    $scope.users = [
        {
            name: 'ABC',
            rno: '100'
        },
        {
            name: 'DEF',
            rno: '200'
        }
    ];
    
    $scope.onChangeFoo = function() {
        console.log('test');
    }        
}]);

app.controller('StudentCtrl', ['$scope', function($scope){
    $scope.onInitEle();    
}]);

app.directive('studentInfo', function(){
    var directive = {};
    
    directive.scope = {
        user: '=user',
        onInitEle: '='
    };
    directive.restrict = 'EA';
    directive.template = '<div>Name: {{user.name}}<br>R.NO: {{user.rno}}</div>';
    directive.controller = 'StudentCtrl';
    
    return directive;
});