javascript - Outputting handlebars from controller to directive is not binding -

i have following directive other cases works fine:

.directive('breadcrumbs', function() {     return {         restrict: "e",         replace: true,         template: '<ul class="breadcrumb offset2" ng-show="breadcrumbs">'                 +'<li ng-repeat="crumb in breadcrumbs">'                     +'<span ng-hide="crumb[1]">{{crumb[0]}}</span>'                     +'<a ng-show="crumb[1]" href="#{{crumb[1]}}">{{crumb[0]}}</a>'                     +'<span ng-show="crumb[1]" class="divider">/</span>'                 +'</li>'             +'</ul>'     } } 

it takes array of "crumbs" , each crumb array holding ['title', 'href'], instance:

$scope.breadcrumbs = [ ['home', '/'], ['projects', '/project'], ['add', ''] ] 

if href empty ngshow/nghide combine hide link , output text.

where becomes problem when want output $scope variable controller in breadcrumbs, instance:

var projectviewctrl = function ($scope, $routeparams, project) {     $scope.project = project.get({id: $routeparams.id})     $scope.breadcrumbs = [ ['home', '/'], ['projects', '/project'], ['{{project.name}}', ''] ] } 

the intention {{project.name}} output in last element of breadcrumbs, , once project.get completes, breadcrumbs updated along else in controller template. unfortunately doesn't happen, , text {{project.name}} output page , never updates.

i know alternative set breadcrumbs in project.get success callback, wouldn't binding, i'd updating value, , therefore negating 1 of main reasons using angular :)

please reffer fiddle http://jsfiddle.net/bjp3v/1/. ng-bind used bind dynamic project name view.

then test whether binding working or not, test method created in controllers scope. while button pressed, project name updated. please put updating of project name inside callback of $http call or $resource call