title: Angularjs - data binding not working with controller
body: <p>I am developing an app that uses <a href="http://getbootstrap.com/getting-started/" rel="nofollow">bootstrap</a> (v3.2.0) with <a href="https://angularjs.org/" rel="nofollow">angularjs</a> (v1.2.26), I want to create a set of <a href="http://getbootstrap.com/css/#grid" rel="nofollow">columns</a> that are changable via a <a href="http://getbootstrap.com/components/#dropdowns" rel="nofollow">dropdown</a>.</p>
  
  <p>I have got the dropdown data binding ok, but I am failing to change the bootstrap responsive column classes when the user selects a different number of columns in the dropdown.</p>
  
  <p>This <a href="http://jsfiddle.net/jeremybrooks321/pykm0tkv/24/" rel="nofollow">fiddle</a> shows my code so far.</p>
  
  <p>The html...</p>
  
  <pre><code>&lt;div data-ng-app=""&gt;
      &lt;div class="container-fluid"&gt;
          &lt;nav class="navbar navbar-default" role="navigation"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;   &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
  
                      &lt;/button&gt;   &lt;span class="navbar-brand navbar-collapse-header"&gt;Header&lt;/span&gt;
  
                  &lt;/div&gt;
                  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li data-ng-controller="ColumnController" id="columnDropDown" class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Columns: {{columnLayout.value}} &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                              &lt;ul class="dropdown-menu" role="menu"&gt;
                                  &lt;li data-ng-repeat="layout in columnLayouts"&gt;   &lt;a data-ng-click="changeLayout(event)" href="#" class="portlet-column-number"&gt;{{layout.text}}&lt;/a&gt;
  
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!-- /.navbar-collapse --&gt;
              &lt;/div&gt;
              &lt;!-- /.container-fluid --&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading mo-product-header"&gt;Header 1&lt;/div&gt;
                  &lt;div class="panel-body"&gt;More content&lt;/div&gt;
                  &lt;div class="panel-footer"&gt;Layout class is {{getLayoutClass()}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading mo-product-header"&gt;Header 2&lt;/div&gt;
                  &lt;div class="panel-body"&gt;Some other content&lt;/div&gt;
                  &lt;div class="panel-footer"&gt;Layout class is {{getLayoutClass()}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading mo-product-header"&gt;Header 3&lt;/div&gt;
                  &lt;div class="panel-body"&gt;Some content&lt;/div&gt;
                  &lt;div class="panel-footer"&gt;Layout class is {{getLayoutClass()}}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and js...</p>
  
  <pre><code>function ColumnController($scope) {
      $scope.columnLayouts = [{
          value: 3,
          text: "Reset",
          layoutClass: "col-sm-6 col-md-4"
      }, {
          value: 1,
          text: "1",
          layoutClass: "col-sm-12"
      }, {
          value: 2,
          text: "2",
          layoutClass: "col-sm-6"
      }, {
          value: 3,
          text: "3",
          layoutClass: "col-sm-4"
      }];
      $scope.changeLayout = function () {
          $scope.columnLayout = this.layout;
      }
      $scope.getLayoutClass = function(){
          return $scope.columnLayout.layoutClass;
      }
      $scope.columnLayout = $scope.columnLayouts[0];
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>Ok so it turns out that I should have only added the 'ColumnController' to one element and in this case that element works best as the wrapper for all other elements.</p>
  
  <p>However, I think to further improve this i will probably create a separate controller for navigation and then <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope" rel="nofollow">broadcast</a> messages about change, in this case I could have the <code>ColumnController</code> listen for messages about column changes and repsond to them to change the model driving the column layout.</p>