title: Angular Directive, Scope: True AND Add attribute to scope
body: <p>my directive is working fine, displaying all the trending tags.  The directive looks for a trendingTag property in the $scope object.  So I have scope: true</p>
  
  <pre><code>app.directive('ngTrending', function () {
      return {
          restrict: 'E'
          , transclude: true
          , replace: true
          , scope: true
          , templateUrl: '/resources/ngViews/trending.html'
  
      };
  });
  </code></pre>
  
  <p>Now I want to be able to configure it based on options (like read-only="true") based on attribute on the directive. And be able to conditionally change minor aspects of the template based on the attirbute such tht</p>
  
  <pre><code>&lt;ng-trending&gt;&lt;/ng-trending&gt;
  </code></pre>
  
  <p>Generates the trending tags with the actions enabled. While </p>
  
  <pre><code> &lt;ng-trending read-only="true"&gt;&lt;/ng-trending&gt;
  </code></pre>
  
  <p>generates the tags, but has the clicks disabled.  How do I code the scope on the directive so that I still inherit the scope of the controller that is hosting the directive e.g.</p>
  
  <pre><code>&lt;div ng-controller="fancy"&gt;
      &lt;ng-trending&gt;&lt;/ng-trending&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>as is the case now (inside of the template of the directive I reference the fancyContrllers $scope.trendingTags property).  But inside of the directive's template I want to reference the "read-only" in the $scope.</p>
  
  <p>It just dawns on me that I am approaching this completely wrong, and that I probably want to pass the trending tags in as well...  I am confused - please help straighten me out!</p>
  
  <p>Thanks.</p>