JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<div ng-app="App" ng-controller="Ctrl">
    through variable: <span ng-bind="hello"></span> <-- good<br/>
    through function: <span ng-bind="getHello()"></span> <-- bad
</div>

JavaScript

angular.module('App', [])
.controller('Ctrl', function($scope, $timeout) {
    var helloDef = $.Deferred();
    $scope.hello = helloDef.promise();
        
    $scope.getHello = function() {
        return $scope.hello;
    };
    
    $timeout(function() {
        helloDef.resolve('Hello!');
    }, 1000);
    
    $scope.$watch('hello', function(val) {
        console.log("$watch hello", val); // <-- good
    })
    
    $scope.$watch('getHello()', function(val) {
        console.log("$watch getHello", val); // <-- bad
    })
});