title: Button functionality malfunctions when added to AngularJS app
body: <p>I have a <a href="https://stackoverflow.com/questions/31684070/bootstrap-radio-button-toggle-coloring/31684575#31684575">button</a> which functions perfectly fine outside of my Angular app.  When I try to add it to my app, its functionality breaks.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body ng-app="app"&gt;
      &lt;div ng-controller="JsonController as jsonCtrl"&gt;
          &lt;div class="cluster" ng-repeat="cluster in flats.blah.CLUSTERS"&gt;
              &lt;h4 class="cluster-title row"&gt;{{cluster.name}}&lt;/h4&gt;
              &lt;div class="center"&gt;
                &lt;div class="container wrap"&gt;
                    &lt;div class="btn-group btn-toggle"&gt;
                      &lt;button class="btn btn-lg btn-green"&gt;ON&lt;/button&gt;
                      &lt;button class="btn btn-lg btn-default active"&gt;OFF&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>json-controller.js</strong></p>
  
  <pre><code>(function() {   
  
      angular
          .module('app')
          .controller('JsonController', function($scope, $http) {
              $http.get('flat.json')
                  .then(function(res) {
                      $scope.flats = res.data;
                  });
          });
  })();
  </code></pre>
  
  <p><code>json-controller.js</code> reads in(?) a JSON file from my workspace so that I can access it via AngularJS.
  The weird part is, when I use a different controller with a hard-coded data model inside the controller, the button works.  So I know the problem is occurring when I include it in the Angular app, but I don't know why.  Any insight would be great.  I'll provide updates as I try to solve this.</p>
  
  <p>Here is a controller it works with:</p>
  
  <p><strong>working-controller.js</strong></p>
  
  <pre><code>(function() {
  
      angular
          .module('app')
          .controller('WorkingController', WorkingController);
  
      function WorkingController() {
  
          this.item = data;
      }
  
      var data == // ... hard-code data model
  })();
  </code></pre>
  
  <p>I know the syntax is different for the controllers, but even when they have the same syntax the problem persists.  I should probably make my controller syntax consistent anyway.</p>
  
  <p>EDIT:</p>
  
  <p>I should also note that other functionality breaks too, such as popovers.  I implemented the button and popover function in a separate jQuery file.  Maybe there is a discrepancy between the JSON and the jQuery?  Am I missing a library dependency?</p>