title: AngularJS change attribute model from inside directive
body: <p>I have setup a directive as below, which is to control the opening and closing of a Flyout panel, I want the state(whether its open/closed) of the flyout to be publicly accessible by the parent scope, I see some use a service for this but it seems verbose use a service, my questions is I'm wondering is there an elegant way to set the variable attached to the attribute on the Close Event? or do I have to access the parent scope? Fiddle Here <a href="http://jsfiddle.net/sjmcpherso/EbDRR/" rel="nofollow">http://jsfiddle.net/sjmcpherso/EbDRR/</a></p>
  
  <pre><code>&lt;div class="page"&gt;
  &lt;button ng-click="openFlyout()"&gt;Bhttp://jsfiddle.net/sjmcpherso/EbDRR/#baseutton {{fly.flyoutOpen}}&lt;/button&gt;
  &lt;flyout foopen={{fly.flyoutOpen}}&gt;
      &lt;button ng-click="close()"&gt;X&lt;/button&gt;
  &lt;/flyout&gt;
  &lt;/div&gt;
  
  
  
  angular.module('myApp', [])
  .controller('MyController', function($scope) {
          $scope.fly = {flyoutOpen:false};
          $scope.openFlyout = function(){
              $scope.fly.flyoutOpen = !$scope.fly.flyoutOpen;
          }
      }).directive('flyout', function() {
  
      return {
          restrict: 'AE',
          link: function(scope, el, attr) {
  
              close.bind('click', function() {
                 //Set fly.flyoutOpen via attr.foopen to false
              });
              attr.$observe('foopen', function(value) {        
                  console.log(typeof value);
                  if (value == "true") {                      
                      el.css('right', '0');
                      console.log("left:"+value);
                  } else {                                   
                      el.css('right', '-150px');
                      console.log("right:"+value);
                  }       
              });
          }
      };
  });
  </code></pre>