Access $scope variable inside directive template and update controller $scope.variable

angularjs, angularjs-directive, angularjs-scope

Solution

Here is a working fiddle

angular.module('mapp', [])

    .controller('ctrl', ['$scope', function ($scope) {
    $scope.total = 0;
    $scope.a = 0;
    $scope.b = 0;
    $scope.$watchCollection('[a,b]', function () {
        console.log('watch');
        $scope.total = $scope.a + $scope.b;
    });
}])

    .directive('customElement', function () {
    return {
        restrict: 'E',
        scope: {
            data: '=info'
        },
        template: '<input type="number" ng-model="data">\
                    <span>{{data}}</span>'
    }
});

A version without $watch

A version with ng-repeat

Problem

I have create a simple directive with an input element and span. Using the directive I created two custom elements with isolate scope. Now, I am trying to get the sum of the data entered in the input element of the directive. But really can't figure out how to do that. Here is the my controller and directive : ``` angular.module('mapp',[]) .controller('ctrl',['$scope',function($scope){ $scope.total = 0; }]) .directive('customElement',function(){ return { restrict: 'E', scope:{ data: '=info' }, template: '<input type="text" ng-model="data1">\ <span>{{data1}}</span>' } }); ``` I'm looking to sum up `data1` of all directives elements and update `$scope.total`. Here is the HTML code: ``` <div ng-app="mapp"> <div ng-controller="ctrl"> <custom-element info="a"></custom-element> <custom-element info="b"></custom-element> <br/> <br/> Total: <span>{{total}}</span> </div> </div> ``` Here is a DEMO

Original source