title: How to modify scope from within a directive in AngularJs
body: <p>I need to modify a root scope attribute from within a callback inside a directive. But the directive is in a inner scope created by a switch directive.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller='AppController'&gt;
      &lt;p&gt;Selected: {{ selected }}&lt;/p&gt;
      &lt;div ng-switch on="selected"&gt;
          &lt;div ng-switch-default&gt;
              &lt;p&gt;Item: {{ selected }}&lt;/p&gt;
              &lt;custom-tag selected-item="selected" /&gt;
          &lt;/div&gt;
          &lt;div ng-switch-when="New value"&gt;
              &lt;p&gt;Worked&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>angular.module('app', [])    
      .directive("customTag", [function () {
      return {
          restrict: "E",
          replace: true,
          template: "&lt;input type='button' value='Click me' /&gt;",
  
          link: function (scope, element, attrs) {
              element.bind('click', function () {
                  scope[attrs.selectedItem] = "New value";
                  scope.$apply();
              });
          }
      };
  }]);
  
  function AppController($scope) {
      $scope.selected = 'Old value';
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/nJ7FQ/" rel="nofollow noreferrer">http://jsfiddle.net/nJ7FQ/</a></p>
  
  <p>My objective is to be able to display "New value" in the Selected area.
  How can I accomplish what I am trying to do? What am I doing wrong?</p>
  
  <p>Besides, as I am trying to make a component. Is there a way to do the same but with an isolated scope?</p>