title: Set all controls as readonly for active tab angularjs
body: <p>I'm using tab directive, my goal is to set all controls for tab directive as readonly when I click on &quot;Tab 1&quot;. I started with adding my custom directive <em>tab-readonly</em> and if I pass value true it should pass through all controls and set them all attribute <em>disabled=&quot;true&quot;</em>.</p>
  <p>HTML:</p>
  <pre><code>&lt;tabset&gt;
      &lt;tab tab-readonly=&quot;true&quot;&gt;
          &lt;tab-heading&gt;
              &lt;span&gt;Tab 1&lt;/span&gt;
          &lt;/tab-heading&gt;
          &lt;input type=&quot;text&quot;&gt;
      &lt;/tab&gt;
      &lt;tab&gt;
          &lt;tab-heading&gt;
              &lt;span&gt;Tab 2&lt;/span&gt;
          &lt;/tab-heading&gt;
          &lt;input type=&quot;text&quot;&gt;
      &lt;/tab&gt;
      &lt;tab&gt;
          &lt;tab-heading&gt;
              &lt;span&gt;Tab 3&lt;/span&gt;
          &lt;/tab-heading&gt;
          &lt;input type=&quot;text&quot;&gt;
      &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  <p>I started to write my custom angular directive, but I haven't idea how to start.</p>
  <pre><code>(function (module) {
      module.directive(&quot;tabReadonly&quot;, ['$rootScope', function ($rootScope) {
          var linkFn = function (scope, element, attrs) {
          };
  
          return {
              restrict: &quot;A&quot;,
              link: linkFn
          };
      }]);
  })(angular.module('appName'));
  </code></pre>
  <p>How can I check if I click on tab is it active and is it have tab-readonly set to &quot;true&quot;?
  Is this a good way to approach to my problem or there exists better solution?</p>