UI бутстрап и угловой гармоник

Question

Я создаю приложение, которое использует угловые js, bootstrap, и я решил попробовать ui bootstrap (угловые директивы для бутстрапа). У меня есть аккордеон с текстовыми областями в них, так как пользователь заполняет их, есть еще один div, который обновляется i.e через выражения. Он отлично работал с бутстрапом, но теперь это не так. мой код:

<div class="col-lg-4"> 
    <accordion> 
     <accordion-group ng-repeat="group in groups" heading="{{group.title}}"> 
      <div> 
       <textarea class="form-control" rows="3" ng-model="what" id="input" maxlength="200"></textarea> 
      </div> 
     </accordion-group> 
    </accordion> 
</div> 

Затем в отдельной DIV у меня есть:

<div class="col-lg-8"> 
<div class="well well-lg note"> 
    <p style="font-size:22px;">My text</p> 
    <p>{{what}}</p> 
</div> 

Любая идея, где я неправильно я в основном пытаюсь связать данные из текстовой области аккордеона в отдельный DIV ??

Answer 1

Пример здесь.

Html файла:

<div ng-controller="TestCtrl"> 
<div class="col-lg-4"> 
    <accordion> 
     <accordion-group ng-repeat="group in groups" heading="{{group.title}}"> 
      <div> 
       <textarea class="form-control" rows="3" ng-model="what[$index]" id="input" maxlength="200"></textarea> 
      </div> 
     </accordion-group> 
    </accordion> 
</div> 
    <div class="col-lg-8"> 
<div class="well well-lg note" > 
    <p style="font-size:22px;"></p> 
    <p ng-repeat="w in what">{{w}}</p> 
</div> 
</div> 

Js Файл:

angular.module('myApp', []); 

function TestCtrl($scope) { 
    $scope.what=[]; 
    $scope.groups = [{"title":"A"},{"title":"B"}]; 

}