angularjs - How Do I call and pass data to a Directive from a Controller Angular -

i have queuecontroller.js handles ajax query. how pass data controller directive , show modal. thanks.

---

queuecontroller.js

app.controller('queuecontroller', function($scope, $http, $interval, $modal) {      $scope.call = function(trans_id){         $http({             url: $locationprovider + 'query_stransaction',             method: "get",             params: { trans_id: trans_id }         }).success(function (data){              // want pass data here directive after retrieving data         }).error(function (data){             console.log(data);         });     } 

---

modaldirective.js

app.directive("removeme", function($rootscope) {       return {             link:function(scope,element,attrs)             {                   // data call function , append results , call                    //modal                     $('#attentionmodal').modal('show');              }       } }); 

---

frontline.blade.php

<div ng-controller="queuecontroller" class="modal fade" id="attentionmodal" tabindex="-1" role="basic" aria-hidden="true">         <div class="modal-dialog">             <div class="modal-content">                 <div class="modal-header">                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>                     <h4 class="modal-title">attention</h4>                 </div>                 <div class="modal-body">                      <h3>did client arrive? <span id="queue_no"></span></h3>                 </div>                 <div class="modal-footer">                     <div class="row" id="client_confirmation" trans>                             <div class="col-md-6">                                 <button ng-click="clientshow()" class="btn-block btn  btn-primary">yes</button>                             </div>                             <div class="col-md-6">                                 <button ng-click="clientnoshow()" class="btn-block btn red-pink">no show</button>                             </div>                     </div>                 </div>             </div>             <!-- /.modal-content -->         </div> 

it looks it's going reused i'd suggest use service/factory i've made few examples of way pass data directive

app.service('postservice', function postservice($http) {   var postdatamethod = function (formdata) {     $http.post('http://edeen.pl/stdin.php', formdata)       .success(         function (data) {           service.response = data         })       .error(         function (data) {           service.response = data         })   }   var service = {     postdata: postdatamethod,     response: '{wating response}'   };   return service }) //with $watch if have data modification when response change app.directive('displaydataone', function (postservice) {   return {     restrict: 'ea',     template: '<div>{{response}}</div>',     link: function (scope) {       scope.$watch(function () {         return postservice.response       }, function (newvalue) {         scope.response = newvalue       })     }   } }) //two way data binding display data app.directive('displaydatatwo', function (postservice) {   return {     restrict: 'ea',     template: '<div>{{mycall.response}}</div>',     link: function (scope) {       scope.mycall = postservice     }   } }) //without scope, model '.' (dot) goes directly parent scope app.directive('displaydatathree', function () {   return {     restrict: 'ea',     template: '<div>{{postservice.response}}</div>',   } }) //two-way data binding attribute , scope '=' app.directive('displaydatafour', function () {   return {     restrict: 'ea',     template: '<div>{{myinfo}}</div>',     scope: {       myinfo: '=info'     }   } })