angularjs directive : $watch returns a string rather the object

Question

I can't get $watch to return me a Javascript object. It always me a string instead like: "{'text':'Hello'}"

Here is my directive (CoffeeScript):

app.directive 'progressIndicator', ->
restrict : 'E'
scope : { progress : '@' }
link : (scope,element,attrs) ->
        scope.$watch 'progress' , (v) ->
            scope.curPrg = v
template :  '<label>In progress: {{curPrg.text}}' +
               '<progress></progress>'

And the HTML code:

<progress-indicator progress={'text':'Hello'}></progress-indicator>

I've tried attrs.$observe : Same behavior.

I've tried controller rather link : Same behavior.

What's wrong ? What's the best way to do it. In the end, I want to able to do:

Answer 1

The problem lies with the scope you are linking. The @ symbol links data as a string instead of as an object.

Instead try =, like such:

app.directive 'progressIndicator', ->
restrict : 'E'
scope : { progress : '=' }
link : (scope,element,attrs) ->
    scope.$watch 'progress' , (v) ->
        scope.curPrg = v
template :  '<label>In progress: {{curPrg.text}}' +
           '<progress></progress>'