gregwinn gregwinn - 1 year ago 102
AngularJS Question

Update scope from a directive on mousedown Angularjs

I am having an issue updating the scope in a controller from a directive. Below are the basics of what is going on.

myApp.directive('myDirective', ['$document', function($document) {
return {
link: function(scope, element, attr, controller) {
angular.element(element).bind('mousedown', function(event){ = 'test';

myApp.controller('myController', ['$scope', function($scope){
$ = 'something';

The html:

<p my-directive>Click me</p>

The result above is always
that was set in my controller, and is never updated to

I have tried a
in my controller but it never updates, so i have to be just missing something...

Lex Lex
Answer Source

Since you are using jQuery .bind functionality you have to use scope.$apply to notify Angular that you have updated a scope property.

angular.module('app', [])
  .directive('myDirective', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        angular.element(element).bind('mousedown', function(event) {
          scope.$apply(function() {
   = 'test';
  .controller('ctrl', function($scope) {
    $ = 'something';
<script src=""></script>
<div ng-app="app" ng-controller="ctrl">
  <p my-directive>Click Me</p>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download