Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-controller="MyCtrl as ctrl">
  <button ng-click="ctrl.toggle()">Click Here</button>
  <div ng-show="ctrl.displayMenu">
    displayMenu value : {{ctrl.displayMenu}}
    <button my-directive>Toggle displayMenu</button>
  </div>
  
</div>

JavaScript

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

myApp.directive('myDirective', function() {
	return {
  	link: function (scope, element) {
    	scope.yolo = function () {
        scope.ctrl.toggle(); // COMMENT ME
       // scope.ctrl.toggleApply(); // UNCOMMENT ME
      };
      
      element.bind('click', function () {
      	scope.yolo();
      })
    }
  }
});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', ['$scope', function ($scope) {
	var self = this;
  self.displayMenu = false;
  
  self.toggle = function () {
  		self.displayMenu = !self.displayMenu;
      console.log('displayMenu value : ' + self.displayMenu);
  }
  
  self.toggleApply = function () {
  	$scope.$apply(function () {
  		self.displayMenu = !self.displayMenu;
      console.log('displayMenu value : ' + self.displayMenu);
  	});
  }
}]);