Javascript Angularjs-数据绑定不适用于控制器

我正在开发一个使用（v3.2.0）和（v1.2.26）的应用程序，我想创建一组可以通过

我已经使下拉数据绑定正常，但是当用户在下拉列表中选择不同数量的列时，我无法更改引导响应列类

这显示了到目前为止我的代码

html

<div data-ng-app="">
    <div class="container-fluid">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">   <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

                    </button>   <span class="navbar-brand navbar-collapse-header">Header</span>

                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li data-ng-controller="ColumnController" id="columnDropDown" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Columns: {{columnLayout.value}} <span class="caret"></span></a>

                            <ul class="dropdown-menu" role="menu">
                                <li data-ng-repeat="layout in columnLayouts">   <a data-ng-click="changeLayout(event)" href="#" class="portlet-column-number">{{layout.text}}</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <div class="row">
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 1</div>
                <div class="panel-body">More content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 2</div>
                <div class="panel-body">Some other content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
        <div data-ng-controller="ColumnController" data-ng-class="getLayoutClass()">
            <div class="panel panel-default">
                <div class="panel-heading mo-product-header">Header 3</div>
                <div class="panel-body">Some content</div>
                <div class="panel-footer">Layout class is {{getLayoutClass()}}</div>
            </div>
        </div>
    </div>
</div>

更新：

好的，结果证明我应该只在一个元素中添加“ColumnController”，在本例中，该元素作为所有其他元素的包装器效果最好

---

然而，我认为为了进一步改进这一点，我可能会创建一个单独的导航控制器，然后创建有关更改的消息，在这种情况下，我可以让

ColumnController

侦听有关列更改的消息，并向他们报告以更改驱动列布局的模型。

问题是您放置了太多

数据ng controller=“ColumnController”

。在使用角度绑定

{{}

或

ngRepeat

的每个标记中，都不需要添加它。包装容器上只需一个。例如：

<div data-ng-app="" data-ng-controller="ColumnController">
    ...
</div>

...

演示：请不要使用“bootstrap”标签，使用“twitter bootstrap”，因为它意味着其他东西

<div data-ng-app="" data-ng-controller="ColumnController">
    ...
</div>