title: AngularJS - Setting a variable on scope from directive
body: <p>I'm trying to set a variable, <code>selected.child</code>, on the <code>$scope</code> so that I can use it elsewhere.  I'm still new to scopes in Angular, but not sure why I can't set something on the scope from within the directive.  I can call scope functions.</p>
  
  <p>I have a <a href="http://jsfiddle.net/YDjY4/2/" rel="noreferrer">JSfiddle</a> for it and code is posted below.</p>
  
  <p>Thanks for the help in advance.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div ng-controller="DashCtrl"&gt;
       &lt;h3&gt;{{selected.child}}&lt;h3&gt;
  
     &lt;div ng-repeat="child in children" select={{child}}&gt;
        {{child.username}}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>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 &lt; 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"
    };
  
  
  });
  </code></pre>