How to call directives inside controllers (AngularJS). Run code here -> http://jsbin.com/ULIFOwI/3/

jsbin.ULIFOwI.css

.red {
    color : red !important;
}

.blue {
    color : blue !important;
}

jsbin.ULIFOwI.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  

<div ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="name" />
    <div my-directive>{{name}}</div>
    <button ng-click="changeColor()">Change Color</button>
</div>

jsbin.ULIFOwI.js

var myApp = angular.module('myApp', []);

myApp.controller('myController', function($scope) {
    $scope.name = "Daniel";
    
    $scope.changeColor = function() {
        $scope.$emit('ChangeColor');
    };
});

myApp.directive('myDirective', function(){
    return function(scope, element, attrs) {
        element.css({color : 'green'});
        
        scope.$on('ChangeColor', function() {
            if(element.hasClass('red')) {
                element.removeClass('red');
                element.addClass('blue');
            } else {
                element.removeClass('blue');
                element.addClass('red');
            }
        });
    };
});