Calling custom directive form controller - angularjs

Question

I have written a custom directive to load 3 drop downs and handle the change event of the drop down inside the controller. On change of the dropdown value I am getting the changed value inside my controller function. I need to call my custom directive and pass the new value.
I am new to AngularJs custom directive. Please let me know how to invoke a directive from within the controller.
The view where I render the custom directive:
<div class="container">
<div class="main-header clearfix">
<div class="page-title">
<h3 class="no-margin">Search for a Host</h3>
</div>
<!-- /page-title -->
</div>
<div class="padding-md">
<div class="hostsFilters row">
<select ng-model="BU" ng-change="changeTheView()" class="form- control">
<option value="">BU</option>
<option value="1">BU1</option>
<option value="2">BU2</option>
<option value="3">BU3</option>
<option value="4">BU4</option>
</select>
<span>OR</span>
<select ng-model="Application" ng-change="changeTheView()" class="form-control">
<option value="">Application</option>
<option value="1">App1</option>
<option value="2">App2</option>
<option value="3">App3</option>
<option value="4">App4</option>
</select>
<span>OR</span>
<input type="text" class="form-text" ng-model="hostName.host_name" placeholder="Hostname">
</div>
</div>
<div class="row">
<i-data-grid></i-data-grid>
</div>
The code of my controller:
'use strict';
angular.module('angularFullstackApp')
.controller('MainCtrl', function ($scope) {
$scope.changeTheView=function(){
console.log('Came inside the Change the view function..');
//Now invoke the custom directive.
}
});
The code for my directive:
'use strict';
angular.module('angularFullstackApp')
.directive('iDataGrid', function () {
return {
templateUrl: 'app/iDataGrid/iDataGrid.html',
restrict: 'E',
link: function (scope, element, attrs) {
$(document).ready(function() {
$('#example').dataTable();
} );
}
};
});

Answer 1

You could take a use of attribute, & pass the values inside attribute for which you wanted to place a watch that would fire when any of the value changed
Markup
<i-data-grid watch-values="['BU', 'Application']"></i-data-grid>
Code
'use strict';
angular.module('angularFullstackApp')
.directive('iDataGrid', function () {
return {
templateUrl: 'app/iDataGrid/iDataGrid.html',
restrict: 'E',
link: function (scope, element, attrs) {
$(document).ready(function() {
$('#example').dataTable();
scope.$watch(attrs.watchValues,function(newVal, oldVal){
//newly changed value available here with same sequence
//as you passed ['BU', 'Application'] here, it fires fn when any of value changed,
//newVal[0] contains newly changed value of BU
//& newVal[1] will contain newly changed value of Application
//call what ever code on basis of this values
},true);
});
}
};
});