title: AngularJS : Change parent scope value from custom directive
body: <p>For some reason I can't make this work based on the other examples I've seen here on SO.</p>
  
  <p>Here's my directive:</p>
  
  <pre><code>(function () {
  
      angular.module('materialDesign')
          .directive('aSwitch', directive);
  
      function directive() {
  
          return {
              templateUrl: 'elements/material/switch/switch.html',
              transclude: false, // I've tried true here
              restrict: 'E',
              scope: {
                  enabled: '=',
                  toggleState: '=',
              },
              link: function(scope, element) {
                  element.on('click touchstart', function() {
                      scope.toggleState = !scope.toggleState;
                  });
              }
          };
      }
  })();
  </code></pre>
  
  <p>And the controller scope value that I want to change when toggling the switch/checkbox:</p>
  
  <pre><code>$scope.hideInactive = true;
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;a-switch toggle-state="hideInactive"&gt;&lt;/a-switch&gt;
  </code></pre>
  
  <p>and further down in my html page, I have this:</p>
  
  <pre><code>&lt;div ng-show="!hideInactive"&gt;
      &lt;!-- stuff --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>This version is "working now", but as soon as I click my switch/checkbox a second time, the element.on fires twice, this flipping my scope value back to what it was.....basically, it's not letting me "un-check" my toggle.</p>
  
  <pre><code>angular.module('material')
      .directive('aSwitch', [
          '$timeout', function($timeout) {
              return {
                  templateUrl: 'elements/material/switch/switch.html',
                  transclude: false,
                  restrict: 'E',
                  scope: {
                      enabled: '=',
                      toggleState: '=',
                  },
                  link: function (scope, element) {
                      element.on('click touchstart', function () {
                          $timeout(function () {
                              scope.toggleState.state = !scope.toggleState.state;
                              scope.$apply();
                          });
                      });
  
                  }
              };
          }
      ]);
  </code></pre>
  
  <p>EDIT and FINAL SOLUTION:</p>
  
  <p>Here's the updated directive link property that fixed everything. I'd like to add that Oleg Yudovich's answer was also used (passing an object as the property instead of a true/false by itself)</p>
  
  <pre><code>link: function (scope, element) {
                  element.on('click touchstart', function (event) {
                      if (event.srcElement &amp;&amp; event.srcElement.id &amp;&amp; event.srcElement.id === "switch") {
                          event.stopPropagation();
  
                          $timeout(function() {
                              scope.toggleState.state = !scope.toggleState.state;
                          });
                      }
                  });
              }
  </code></pre>