**controller**

```
angular.module('myApp')
  .controller('myCtrl', [  '$mdDialog', '$mdMedia', 'viewDialog', myCtrl]);
..

function myCtrl(  $mdDialog, $mdMedia, viewDialog) {   
    $scope.viewItem = function(ev,id) {
        viewDialog.ITEM(ev,id)
    };
}

```

**html**

```
<div ng-controller="myCtrl">
  <md-list-item ng-repeat="item in myarr">
     <a  my-view-dialog">
       <h4> {{item.id}} </h4>
     </a>
  </md-list-item>
</div>

```

When I call the function directly form controller the modal window works fine on click 

using the directive

My directive

```
angular.module('myApp')
    .directive('myViewDialog', function ($parse) {
        return {
            compile: function(tElm,tAttrs){
              var exp = $parse('viewItem($event,item.id)')
              return function (scope,elm){
                elm.bind('click',function(){
                  exp(scope);
                });
              };
            }
        };;
    });

```

Now I want to remove the controller dependency and directly call the viewDialog service from the directive it does not work.

here is code for service injection

```
angular.module('myApp')
    .directive('myViewDialog', function ($parse, viewDialog) {
        return {
            compile: function(tElm,tAttrs){
              var exp = $parse('viewDialog.ITEM($event,item.id)') 
          return function (scope,elm){
                elm.bind('click',function(){
                  exp(scope);
                });
              };
            }
          };;
    });

```