Angular: View value not updating

http://angularjs.org/

by Akshay Garg

HTML

<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <p>Current song playing: {{currentSong.SongName}}</p>
    <p><input type="button" value="Update Song" ng-click="updateSong()" /></p>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($scope, $timeout, $q, $http) {
    $scope.currentSong = {
        SongName: ''
    }

    //loadCurrent().then(function (data) {
        //$scope.currentSong.SongName = data;
    //});

    $scope.updateSong = function () {
        loadCurrent().then(function (data) {
            $scope.currentSong.SongName = data;
            //$timeout(function () {
                 //$scope.$apply();
            //});
        });
    }

function loadCurrent() {
        var deffered = $q.defer();
        $timeout(function () {
            //$http({
                //method: 'GET',
                //port: '8080',
                //headers: {
                    //'Content-Type': 'application/json'
                //}
            //}).then(function successCallback(response) {
                deffered.resolve('Dummy Song!');
            //}, function errorCallback(response) {
                //console.log(response)
            //});
        }, 500);
        return deffered.promise;
    }
}