Direttive AngularJS: modifica $ scope non riflessa nell’interfaccia utente

Sto cercando di creare alcuni elementi personalizzati con AngularJS e associarvi alcuni eventi, quindi noto che $ scope.var non aggiornerà l’interfaccia utente quando utilizzato in una funzione di associazione.

Ecco un esempio semplificato che descrive il problema:

HTML:

       
{{result}}

JS:

 function Ctrl2($scope) { $scope.result = 'Click Button to change this string'; $scope.a = function (e) { $scope.result = 'A'; } $scope.b = function (e) { $scope.result = 'B'; } } var mod = angular.module('test', []); mod.directive('myButton', function () { return function (scope, element, attrs) { //change scope.result from here works //But not in bind functions //scope.result = 'B'; element.bind('click', scope.b); } }); 

DEMO: http://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview

In generale, collego l’evento click al my-button e desidero modificare $scope.result quando l’utente fa clic sul pulsante B (simile a ng-click:a() sul pulsante A). Ma la vista non si aggiornerà al nuovo $scope.result se faccio così.

Che cosa ho fatto di sbagliato? Grazie.