Setting a new property on the isolate scope of a directive in AngularJS?

I've just upgraded to angularjs 1.2.1, and some code which has been working before, is no longer working.

I have the following directive:

var fooFactory = function($timeout)
{
    var foo = 
    {   
        scope:
        {
            bar: '=',
            baz: '=', 
            onBar: '&',
            onBaz: '&',
        },
        controller: ['$scope', '$element', '$attrs', 
           function($scope, el, attrs)
           {
               var that = this;      
               that.state = null;
               that.main = function()
               {
                  that.state = "init";
               };

               that.getState = function()
               {
                   return that.state;
               }


              that.main();
              $scope.foo = that;    
              console.debug( "foo main called", $scope.foo );
           }],


       link: function(scope, el, attrs)
       {
       },

    };
    return foo;
};

MyAngularApp.directive('foo', ['$timeout', fooFactory]);

Here's how I'm including this directive in the view:

<div data-foo="true">
   Foo: {{foo}} <br />
   Foo state: {{foo.getState()}}
</div>

The problem is, when I run this code, I do get the console.debug statement for foo main called(), and $scope.foo is correctly set to the controller of the foo directive. But in the view itself, I see no output at all for either {{foo}} or {{foo.getState()}}, as if these have not been set on the scope at all.

Is it because of the isolate scope, that the line $scope.foo = that; is not having any effect? Please advise.