Self invoking javascript function on an AngularJS web page

Question

I have this self invoking function for a AngularJS webpage. As you can see, I have this getData() function, whose job is to make an ajax call to get some data as the page loads as well as subsequently as per the users interaction with the page.

<script type="text/javascript">
    // Should I defne it here like this completely outside the self invoking
    // function with or without var keyword
    getData = function (reqData) {
        alert(reqData); // Ajax call here...
    };

    (function () {

        // Should I defne it here like this? 
        getData = function (reqData) {
            alert(reqData); // Ajax call here...
        };

        //Should I have to use the var key word like so 
        var getData = function (reqData) {
            alert(reqData);// Ajax call here...
        };

        PatientCategoryController = function ($http, $scope, uiGridConstants) {

            // Should I defne it here like this inside the controller? 
            getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            //Should I have to use the var key word inside the controller?
            var getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            // Or should I define the function on the $scope object like so?
            $scope.getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            angular.element(document).ready(getData('someDataToPass'));
        }
        PatientCategoryController.$inject = ['$http', '$scope', 'uiGridConstants'];
        angular.module('demoApp', ['ui.grid', 'ui.grid.autoResize', 'ui.grid.pagination']);
        angular.module('demoApp').controller('PatientCategoryController', PatientCategoryController);
    }());
</script>

My question is how should this function be defined? Should this be defined on $scope object? Or should be defined at par with the controller? Or should I define it completely outside the self invoking function?

Also in similar lines where should I define the javascript object which will hold the data that may be required for the ajax call.

I started building this page and at somepoint, javascript began behaving weardly, so I had to start from scratch again. This is the reason I am asking this question. In the past I have read and tried to learn about javascript, but except on browser side, I have not done any serious javascript programming. This app itself is in Asp.Net mvc. So I never feel confident with javascript and keep getting into this trouble. Please guide me.

Answer 1

If you are expecting this code is written for controller then you can follow this pattern which i commonly use.

(function () {
    'use strict';
    angular
        .module('moduleName')
        .controller('controllerName', controllerName);

    controllerName.$inject = ['$rootScope', '$scope'];

    function controllerName($rootScope, $scope) {
        var vm = this;
        //define your variables here

        activate();//self invoking method

        function activate(){
            //do whatever you want to do here
        }
    }
})();

Hope this helps.

Answer 2

Something like this should be created as an Angular service and then injected into your app and controllers where needed.

If you want to make it something that's globally available everywhere, this question Angular JS - Make service globally accessible from controllers and view should give you some good guidance.