Why cant I pass an element attribute to scope.$watch but i can pass a function that returns it

I wrote a directive watchId with the following code

.directive('watchId', function(){
 return {
  restrict: 'A',
  link: function(scope, elem, attr) {
   scope.$watch(function() { return elem.attr('id') }, function(newValue){
    if (newValue) {
     scope.loaded[newValue] = true
    }
   })
  }
 }
})

The above code works correctly but my question is why cant i just do scope.$watch(elem.attr('id'), function(newValue) {

I dont think it will be needed but here is a JSfiddle where Im playing with the above.