title: Button Disabled/enabled on check-box state with Angular
body: <p>I have created a reusable directive and using it in two different forms but unable to able/disable the button in form which changes according to the check-box state in directive. I want disable the button until checkbox is not checked and disable it whenever check-box get unchecked.</p>
  
  <p>My <a href="http://jsfiddle.net/1wg0c24f/25/" rel="nofollow">Fiddle</a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div ng-app='demo'&gt;
    &lt;form name="verification" ng-controller="myCtrl1"&gt;
      &lt;terms-conditions conditions="conditions"&gt;&lt;/terms-conditions&gt;
      &lt;br&gt;
      &lt;button class="btn-primary" ng-disabled="!checked" &gt;Submit&lt;/button&gt;
      &lt;hr&gt;
    &lt;/form&gt;
  
    &lt;form name="bankinfo" ng-controller="myCtrl2"&gt;
      &lt;terms-conditions conditions="conditions"&gt;&lt;/terms-conditions&gt;
        &lt;br&gt;
        &lt;button class="btn-primary"&gt;Submit&lt;/button&gt;
        &lt;hr&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>JS</h2>
  
  <pre><code>var demo = angular.module('demo', []);
  demo.directive("termsConditions",function(){
  return {
      restrict:"E",
      scope:{
          conditions:'='
  
      },
      template:
      "&lt;div class='terms row'&gt;&lt;span class='col-md-12'&gt;{{conditions}}&lt;/span&gt;&lt;/div&gt;&lt;br&gt;&lt;input type='checkbox'&gt;&lt;span&gt;Yes, I agree to the terms and condtions&lt;/span&gt;"
  }
  
  });
  demo.controller("myCtrl1",function($scope){
      $scope.conditions= " Payment terms" ;
  
  })
  demo.controller("myCtrl2",function($scope){
   $scope.conditions= "Bank Terms" ;
  
  });
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>span {
    font-weight:bold;
  }
  .terms{font-weight: normal;
    width: 500px;
    height: 50px;
    overflow-y: scroll;
    padding: 5px 5px 5px 5px;
    border-style: solid;
    border-color: #666666;
    border-width: 1px;
  }
  </code></pre>