Call API function one time on show

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.js"></script>
<div ng-app="app">
    <div ng-controller='MainCtrl'>
        <button ng-click='show=!show'>Show Message</button>
         <h1 custom-directive ng-show='show'>Hello {{message}}</h1>

    </div>
</div>

JavaScript

angular.module('app', ['ngResource'])
    .controller('MainCtrl', ['$scope', '$resource', function ($scope, $resource) {
    $scope.message = "World";
}]);

angular.module("app").directive("customDirective", function () {
    return {
        scope: {
            ngShow: '='
        },
        link: function (scope, element, attr) {
            var observeFn = scope.$watch('ngShow', function (value) {
                if (value) {
                    console.log('Making api call');
                    observeFn(); // degister after first callback,    
                }
            });
        }
    };
});