Actualizar el modelo angular después de establecer el valor de entrada con jQuery

Tengo este simple escenario:

Elemento de entrada cuyo valor se cambia por el método val () de jQuery.

Estoy tratando de actualizar el modelo angular con el valor que jQuery establece. Intenté escribir una directiva simple, pero no está haciendo lo que quiero.

Aquí está la directiva:

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

esta es la parte jQuery:

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

y html:

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

<button>clickme</button>

Aquí está el violín con mi intento:
http://jsfiddle.net/U3pVM/743/

¿Puede alguien indicarme el camino correcto?

Respuestas a la pregunta(10)

Su respuesta a la pregunta