イオンモーダル内でのNgClickバインディングの問題

Question

モーダル内のクリックをバインドできません。モーダルは私のコントローラで定義されています

$scope.fooBar = function() { 
    alert("FOO!"); 
}; 

$ionicModal.fromTemplateUrl('templates/modals/withdrawal.html', { 
    scope: $scope 
}).then(function(modal) { 
    $scope.cashoutModal = modal; 
}); 

$scope.lists = [ 
    { foo: "CLICK ME 1"}, 
    { foo: "CLICK ME 2"} 
]; 

モーダルビューは次のとおりです。

<ion-header-bar align-title="center" class="bar bar-header bar-positive"> 
    <h1 class="title">Richiedi un bonifico</h1> 
    <button ng-click="fooBar()" class="button button-clear button-primary fixed-bar-pos"><i class="ion-ios-close-outline"></i></button> 
</ion-header-bar> 

<ion-content class="padding"> 
    <ion-list> 
     <ion-item ng-repeat="list in lists"> 
      <div class="weddingListItem" ng-click="fooBar()"> 
       <span class="title">{{list.foo}}</span> 
      </div> 
     </ion-item> 
    </ion-list> 
</ion-content> 

あなたは、静的なボタンまたは動的に生成されたのいずれかをクリックすることで見ることができるようにリストアイテムの機能fooBarは、何も起きず、コンソールにエラーがなく、アラートが表示されません。

モーダルが働いていると意図したとおりにビューがレンダリングされ、私はここで何をしないのですか？

Answer 1

<ion-modal-view ng-controller="ModalController"> 
     <ion-header-bar> 
      <h1 class="title">Richiedi un bonifico</h1> 
      <button ng-click="fooBar()" class="button button-clear button-primary fixed-bar-pos"><i class="ion-ios-close-outline"></i></button> 
     </ion-header-bar> 
     <ion-content class="padding"> 
      <ion-list> 
      <ion-item ng-repeat="list in lists"> 
       <div class="weddingListItem" ng-click="fooBar()"> 
       <span class="title">{{list.foo}}</span> 
       </div> 
      </ion-item> 
      </ion-list> 
     </ion-content> 
     </ion-modal-view> 

DEMO