AngularJS - setting a variable for coverage from the directive

Question

I am trying to set the selected.child variable to $scope so that I can use it elsewhere. I'm still new to the Angular realm, but not sure why I cannot set something in the scope inside the directive. I can call area functions.

I have a JSfiddle and the code is sent below.

Thanks for the help in advance.

HTML:

 <div ng-controller="DashCtrl"> <h3>{{selected.child}}<h3> <div ng-repeat="child in children" select={{child}}> {{child.username}} </div> </div> 

javascript:

 var dash = angular.module('dash', []); dash.directive('select', function () { return { restrict: "A", scope: false, link: function (scope, element, attrs) { element.bind('click', function () { scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this scope.setSelected(jQuery.parseJSON(attrs.select)); //Nor this is working if (attrs.select != scope.selected) { other_elements = angular.element(document.querySelectorAll('[select]')); for (var i = 0; i < other_elements.length; i++) { elm = jQuery(other_elements[i]); elm.css('background', 'none'); } element.css('background', '#F3E2A9'); } }); } }; }); dash.controller('DashCtrl', function ($scope) { $scope.setSelected = function (child) { $scope.selected.child = child; }; $scope.children = [{ "age_group": "6-8", "username": "my_child" }, { "age_group": "8-10", "username": "another_child" }]; $scope.selected = { child: "none" }; }); 

Answer 1

You do not need a call to $ apply Just change your code as shown below.

  scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this // scope.setSelected(jQuery.parseJSON(attrs.select)); //Nor this is working scope.$apply();