I have a directive in which I pass in an `attrs` and then it is watched in the directive. Once the `attrs` is changed, then an animation takes place. My `attrs` always is undefined when the `$watch` gets triggered. 

```
App.directive('resize', function($animate) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.resize, function(newVal) {
      if(newVal) {
        $animate.addClass(element, 'span8');
      }
    });
  };
});

```

And here is my test:

```
describe('resize', function() {
  var element, scope;
  beforeEach(inject(function($compile, $rootScope) {
    var directive = angular.element('<div class="span12" resize="isHidden"></div>');
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
    scope = $rootScope;
  }));

  it('should change to a span8 after resize', function() {
    expect($(element).hasClass('span12')).toBeTruthy();
    expect($(element).hasClass('span8')).toBeFalsy();
    element.attr('resize', 'true');
    element.scope().$apply();
    expect($(element).hasClass('span8')).toBeTruthy();
  });
});

```

When the `attrs` changes, my watchers `newValue` is undefined and so nothing happens. What do I need to do to make this work? Here is a [plunker](http://plnkr.co/DzFqjwUzohChZ6ANYNKk)