title: Angular + ui.bootstrap.buttons + radio filter
body: <p>I want a button group act as radio buttons like <a href="http://angular-ui.github.io/bootstrap/#buttons" rel="nofollow">here</a>.</p>
  
  <p>What i want is:</p>
  
  <ul>
  <li>The buttons should be disabled by default but ALL the entries should be shown by default.</li>
  <li>Radio button behaviour.</li>
  </ul>
  
  <p>How can i achieve this with my current code?</p>
  
  <p>My HTML: </p>
  
  <pre><code>Filter By Title: 
  &lt;div class="btn-group"&gt;
  &lt;button type="button" ng-repeat="title in titles" class="btn btn-default" ng-model="selected[title]" btn-checkbox&gt;{{title}}&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;table class="table table-bordered table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Title&lt;/th&gt;
            &lt;th&gt;Text&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr ng-repeat="entry in entries | filter:byTitle"&gt;
            &lt;td&gt;{{entry.title}}&lt;/td&gt;
            &lt;td&gt;{{entry.text}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;   
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>App.controller('MainCtrl', function($scope, $http) {
      $http.get('output/entries.json')
      .then(function(res){
          $scope.entries = res.data;                
      });                      
  
      $scope.selected = {};
      $scope.titles = ["sometitle","someothertitle","anothertitle"];
  
      function isChecked(obj){
          var checked = [];
          for(var key in obj){
              if(obj[key])
                  checked.push(key);
          }
          return checked;
      };
      $scope.byTitle = function(entry){
          var checked = isChecked($scope.selected);
          return checked.indexOf(entry.title) &gt; -1;
      };    
  
  } );
  </code></pre>