angularjs - directive unable to retrieve data from a service -

i have little spa using angular. concept simple, after login, $routeprovider redirects home page have homecontroller specified. home view rendered ng-view while navigating "/home" :

<my-directive datas=getdata()></my-directive> <ul>  <li ng-repeat="data in datas"> {{data.title}} {{data.content}} </li> </ul> 

my directive written as:

angular.module('app').directive('mydirective', ['myservice', function (myservice) {     return {         restrict: "e",         scope: {             data: '='         },         templateurl: "partials/my-directive.html",         controller: function ($scope) {             $scope.getdatas = function()             {                 myservice.retdata();             }         }     }; }]); 

the home controller is:

 angular.module('app').controller('homecontroller', homecontroller);  homecontroller.$inject = ['myservice', '$scope']; function homecontroller(myservice, $scope) {     var vm = this;     vm.data = [];      initcontroller();      function initcontroller() {         vm.data = myservice.retdata();     }  } 

and service is

angular.module('app').service('myservice', myservice);      function myservice () {         var data = [                         { id: 1, title: 'albert einstein', content: 'random content' }                    ];         return {             retdata: function () {                 return data;             },             adddata: function (title, content) {                 var currentindex = data.length + 1;                 data.push({                     id: currentindex,                     title: title,                     content: content                 });             }         };     } 

now mentioned everything, here comes problem. directive not able retrieve data service. when run project in vs2013, mydirective.js not loaded. included services, directives, controllers etc in main html page. causing problem? have scope being isolated in directive? better approach sharing data between controller, directive , service? may have made silly mistakes while rewriting code. please point them out, keep in mind actual issue , error may causing that.

better use isolated scope pass data controller directive.

html:

<my-directive datas="getdata()" data="data"></my-directive> 

directive:

angular.module('app').directive('mydirective', [function () {     return {         restrict: "e",         scope: {             data: '='         },         templateurl: "partials/my-directive.html",         link: function (scope) {           //here got isolated scope data           var details = scope.data;         }     }; }]); 

or

app.directive('mydirective', function() {     return {         restrict: 'e',         templateurl: 'partials/my-directive.html',         scope: {             date: '=',         },         controller : ['$scope', 'myservice', function($scope, myservice) {             myservice.retdata();         }],         link: function(scope, elem, attr) {             //         }      }; });