title: Disable Button If Checkbox Is Unchecked In Angular JS
body: <p>So I'm working on this web application. I have a list of categories, where if an item on the list is not checked, the "Save"and "Publish"buttons would be disabled. I understand <code>ng-disabled = !(ng-model name)</code>would do just that, but each time, I load the page, the buttons are disabled, but do not get enabled when I check an item on the list.</p>
  
  <pre><code>&lt;a ng-if="status() &lt; 2" href="#" data-ng-click="publish(true)" class="btn btn-sm btn-block btn-success" ng-disabled="!cat.IsSelected"&gt;{{lbl.publish}}&lt;/a&gt;
  &lt;a ng-if="status() == 2" href="#" data-ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected"&gt;
  {{lbl.save}}
  &lt;/a&gt;                       
  &lt;span ng-if="status() &lt; 2"&gt;
     &lt;a href="#" ng-click="save()" class="btn btn-sm btn-block btn-primary"   id="check_box" ng-disabled="!cat.IsSelected"&gt;
      {{lbl.save}}
     &lt;/a&gt;
  &lt;/span&gt;
  
  &lt;ul class="categories-list"&gt;
      &lt;li ng-repeat="cat in lookups.CategoryList"&gt;
        &lt;label&gt;&lt;input type="checkbox" id="cat-{{cat.OptionValue}}" data-ng-model="cat.IsSelected"/&gt; {{cat.OptionName}}&lt;/label&gt;
      &lt;/li&gt;
      &lt;li ng-if="lookups.CategoryList.length == 0" class="item-empty"&gt;{{lbl.empty}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>$scope.post.Categories = [];
  if ($scope.lookups.CategoryList != null) {
      for (var i = 0; i &lt; $scope.lookups.CategoryList.length; i++) {
          var cat = $scope.lookups.CategoryList[i];
          if (cat.IsSelected) {
              var catAdd = { "IsChecked": false, "Id": cat.OptionValue, "Title": cat.OptionName };
              $scope.post.Categories.push(catAdd);
          }
      }
  }
  </code></pre>