Button Disabled/enabled on check-box state with Angular - angularjs

Question

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.
My Fiddle
HTML
<div ng-app='demo'>
<form name="verification" ng-controller="myCtrl1">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
<hr>
</form>
<form name="bankinfo" ng-controller="myCtrl2">
<terms-conditions conditions="conditions"></terms-conditions>
<br>
<button class="btn-primary">Submit</button>
<hr>
</form>
</div>
JS
var demo = angular.module('demo', []);
demo.directive("termsConditions",function(){
return {
restrict:"E",
scope:{
conditions:'='
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input type='checkbox'><span>Yes, I agree to the terms and condtions</span>"
}
});
demo.controller("myCtrl1",function($scope){
$scope.conditions= " Payment terms" ;
})
demo.controller("myCtrl2",function($scope){
$scope.conditions= "Bank Terms" ;
});
CSS
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;
}

Answer 1

You almost got it right, you need to pass checked attribute value as the 2 way binding property and use ng-disabled.
<terms-conditions conditions="conditions" checked="checked"></terms-conditions> <br>
<button class="btn-primary" ng-disabled="!checked" >Submit</button>
Fiddle