Обновите угловую модель после установки входного значения с помощью jQuery

У меня есть этот простой сценарий:

Входной элемент, значение которого изменяется методом val () jQuery.

Я пытаюсь обновить угловую модель со значением, установленным jQuery. Я пытался написать простую директиву, но она не делает то, что я хочу.

Вот директива:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

это часть jQuery:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

и HTML:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

Вот скрипка с моей попыткой:
http://jsfiddle.net/U3pVM/743/

Может кто-нибудь, пожалуйста, укажите мне в правильном направлении?

Ответы на вопрос(10)

Ваш ответ на вопрос