How to manipulate controller's scope from directive in angular 1.4.5+

Question

How can i overwrite the myCtrl's variable from directive? and after, the controller must update the results...

I heard about bindToController, but I could not get it to work.

Used ng version 1.4.5

HTML:

<form method="POST">
<div ng-app="myapp">
    <div ng-controller="myCtrl">
        <div ng-repeat="(field, value) in box.fields">
            <div class="my-toggle" my-toggle="field" ng-bind="value['par2']"></div>
        </div>
    </div
</div>
</form>

JS:

//The question is, how can i overwrite the myCtrl's variable from directive?
//and after, the controller must update the results...

//I heard about bindToController, but I could not get it to work.

//used version 1.4.5

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

myapp.controller('myCtrl', function ($scope){
    $scope.box = {
        fields : {
            fieldOne:{
                par1 : 10,
                par2 : 12,
            },
            fieldTwo:{
                par1 : 20,
                par2 : 24,
            },
            fieldThree:{
                par1 : 30,
                par2 : 36,
            }
        }
    };
});

myapp.directive('myToggle', [function(){
  return{
    restrict: 'A',
    scope: {
        myToggle : '=',  
    },
    link : function(scope, element, attr){
        var startX = 0, x = 0;
        var elementLeft = 0;

        element.on('mousedown', function(event){
            //ctrlSCOPE.fields[scope.mytoggle]['par1'] + 1;
            //console.log(ctrlSCOPE.fields[scope.mytoggle]['par2']);
        });
    },
  };
}]);

JSFIDDLE - Illustration

Answer 1

You don't need to think of bindToController that gets used when controllerAs syntax is used in directive.

I think you should pass value of ng-repeat instead of passing its key field like my-toggle="value"

As you are going to update a scope variable from mousedown event, which wouldn't update value of scope variable. Events are considered as out of angular context, thus angular doesn't run digest cycle for such case. You could run that digest cycle by doing scope.$apply() . Better would be $timeout which will avoid the digest cycle conflict.

Markup

<div ng-repeat="(field, value) in box.fields">
    <div class="my-toggle" my-toggle="value" ng-bind="value['par2']"></div>
</div>

Directive

myapp.directive('myToggle', [function(){
  return{
    restrict: 'A',
    scope: {
        myToggle : '='
    },
    link : function(scope, element, attr){
        var startX = 0, x = 0;
        var elementLeft = 0;

        element.on('mousedown', function(event){
          scope.$apply(function(){
            scope.myToggle['par1'] = scope.myToggle['par1'] + 1;
            scope.myToggle['par2'] = scope.myToggle['par2'] + 1;
            console.log(scope.myToggle['par2']);
          });
        });
    },
  };
}]);

Demo Fiddle