AngularJs Controller not calling the Service

Question

I am new to AngularJs, so appologise if I ask something silly.

I am using angularSlideOutPanel to populate a popup by calling a controller "TeacherDetailsController". the controller TeacherDetailsController further calls a AnularJS Service that calls an MVC Controller's Action method to get data in Json format.

The problem I am getting is my TeacherDetailsController gets fired but it never hits the line

 $scope.GetTeacherInfo = function () 

I am not sure how to call the GetTeacherInfo Service.

Below is my relevant code:

Controller

    var app = angular.module('myFormApp', [
  'angular-slideout-panel'
])
.controller('HomeController', function ($scope, angularSlideOutPanel, $http, $location, $window) {
    getallData();


//******=========Get All Teachers=========******  
    function getallData() {
        $http({
            method: 'GET',
            url: '/Home/GetAllData'
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.ListTeachers = response.data;
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            $scope.errors = [];
            $scope.message = 'Unexpected Error while saving data!!';
            console.log($scope.message);
        });
    };


    //******=========Get Single Customer=========******

    $scope.getTeacher = function (teacherModel) {

        $http({
            method: 'GET',
            url: ('/Home/GetbyID/' + teacherModel.TeacherNo),
            params: { "TeacherNo": teacherModel.TeacherNo }
        }).then(function successCallback(response) {
            $scope.teacherModel =response.data;
            getallData();
        }, function errorCallback(response) {
            $scope.message = 'Unexpected Error while loading data!!';
            $scope.result = "color-red";
            console.log($scope.message);
        });
    };

    //******=========slide Customer popup =========******
    $scope.openPanelRight = function (teacherModel) {
        var panelInstance2 = angularSlideOutPanel.open({
            templateUrl: '/Templates/teacherDetail.html',
            openOn: 'right',
            controller: 'TeacherDetailsController',
            resolve: {
                Teacher: [
                  function () {
                      return teacherModel;
                  }
                ]
            }
        });
    };

})
.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) {

    $scope.Teacher = Teacher;
       $scope.closePanel = function () {
           $scope.$panelInstance.close('this is from the controller!!');
       };

       $scope.GetTeacherInfo = function () {
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) {
               $scope.Teacher = ord.data;
           }, function () {
               genericService.warningNotify("Error in getting Teacher Info");
           });
       }
   }])

.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

Service

app.service("TeacherService", ['$http', '$location', function ($http, $location) {

    this.GetTeacherInfo = function (TeacherNo) {
        var response = $http({
            method: "get",
            url: "/Home/GetbyID?TeacherNo=" + TeacherNo
        });
        return response;
    }


}]);

MVC Controller

public class HomeController : Controller
{
    [HttpGet]
    public JsonResult GetbyID(int TeacherNo)
    {
        return Json(Workflow.Teacher.GetTeacher(TeacherNo), JsonRequestBehavior.AllowGet);
    }

}

Calling HTML

    <a href="#" ng-click="openPanelRight(teacherModel)" title="Edit Record">
        <div class="col-xs-12 col-sm-9">
            <span class="name">{{teacherModel.TeaFName}} {{teacherModel.TeaSName}}</span><br />
            <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="{{teacherModel.TeaEmail}}"></span>
            <span class="visible-xs"> <span class="text-muted">{{teacherModel.TeaEmail}}</span><br /></span>
        </div>
    </a>

Answer 1

Try init function.. And call it. Try like below.

.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) {

    function init(){
     $scope.Teacher = Teacher;
    $scope.GetTeacherInfo();
    }

 $scope.closePanel = function () {
           $scope.$panelInstance.close('this is from the controller!!');
       };

       $scope.GetTeacherInfo = function () {
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) {
               $scope.Teacher = ord.data;
           }, function () {
               genericService.warningNotify("Error in getting Teacher Info");
           });
       }

init();

   }])

Answer 2

call GetTeacherInfo() methos inside your TeacherDetailsController if you instantly need data on controller load. like below :

.controller('TeacherDetailsController', ['$scope', 'TeacherService', 'Teacher', function ($scope, TeacherService, Teacher) {

       $scope.Teacher = Teacher;
       $scope.closePanel = function () {
           $scope.$panelInstance.close('this is from the controller!!');
       };

       $scope.GetTeacherInfo = function () {
           var TeacherInfo = TeacherService.GetTeacherInfo(Teacher.TeacherNo);
           TeacherInfo.then(function (ord) {
               $scope.Teacher = ord.data;
           }, function () {
               genericService.warningNotify("Error in getting Teacher Info");
           });
       }

       $scope.GetTeacherInfo();  //call here
   }])