angularjs - UI bootstrap and angular accordian -

i building app uses angular js, bootstrap , opted try ui bootstrap (angular directives bootstrap). have accordion text areas in them, user fills them in there div gets updated i.e via expressions. worked fine bootstrap not. code is:

<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> 

then in separate div have:

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

any idea's going wrong trying bind data accordion text area separate div??

example here.

html file:

<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 file:

angular.module('myapp', []);  function testctrl($scope) {     $scope.what=[];     $scope.groups =  [{"title":"a"},{"title":"b"}];  }