JsonResult method not calling through angular call

Question

JsonResult method not calling through $http call,

I am working on a project that uses ASP.NET MVC, AngularJS I am calling a mvc controller from AngularJS. I am getting an jsonresult as in the call to a MVC controller from AngularJS .

this is the result

[
 {
"Branch_ID": 1,
"Branch_Name": "sdsds",
"Branch_Address": "sfsdfsdf",
"Branch_email": "sdfsdfsdf",
"Branch_Notes": "sfsffsfd",
"Branch_Manager": null,
"Branch_Phone": null,
"Branch_TimeFrom": "/Date(-2208996000000)/",
"Branch_TimeTo": "/Date(-2208996000000)/",
"saturday": false,
"sunday": false,
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"Departments": null
 }
]

branches controller

public class BranchesController : Controller
{

private IRepositoryBase<Branches> BrancheRepository;

public BranchesController(IRepositoryBase<Branches> brancheRepository)
{
    this.BrancheRepository = brancheRepository;
}
// GET: Branches
public JsonResult Index()
{

    var branches =   BrancheRepository.GetAll();

    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}

    return Json(branches, JsonRequestBehavior.AllowGet);
   } 
 }

Index.cshtml

<div class="container" ng-controller="branch-controller">
<div class="panel panel-info">
    <div class="panel-heading">
        Branch Details - Grid CRUD operations
    </div>
    <table class="table table-bordered">
        <thead style="background-color:lightblue;">
            <tr>
                <th> Branch Address</th>
                <th> Branch Email</th>
                <th>Branch Name</th>
                <th>Branch Notes</th>
                <th> Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="branche in Branches">
                  <td>{{branche.Branch_ID}}</td>
                <td>{{branche.Branch_Address}}</td>
                <td>{{branche.Branch_email}}</td>
                <td>{{branche.Branch_Name}}</td>
                <td>{{branche.Branch_Notes}}</td>

                <td style="width:200px;">
                    <a href="#" class="btn btn-info">Update</a>
                    <a href="#" class="btn btn-danger">Delete</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Module.js

var myapp;
(function () {

     myapp = angular.module('my-branches', []);
 })();

Controller.js

myapp.controller('branch-controller', function ($scope, branchService) {

  //Loads all branch records when page loads
     loadBranches();

   function loadBranches() {
   var BrancheRecords = branchService.getAllBranches();

   BrancheRecords.then(function (data) {
    //success

    $scope.Branches = data;
},
function (error) {
    console.log(error);
    alert("Error occured while fetching branche list...");
  });
 }
});

Service.js

myapp.service('branchService', function ($http) {

this.getAllBranches = function () {

    return $http.get("/Branches/Index").then(function (response) {

        return response.data;
    });
  };
});   

Answer 1

I have changed my code to this code to solve the issue

FetchData.js

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

app.service("myService", function ($http) {

    //get All Branches
    this.getAllBranches = function () {
        return $http.get("Branches/GetAllBranches");
    };
});


app.controller("branchcontroller", function ($scope, myService) {
    getAllBranches();
    function getAllBranches() {
        var getData = myService.getAllBranches();
        getData.then(function (response) {
            $scope.Branches = response.data;
        }, function (error) {
                console.log(error);
            alert('Error in getting records');
        });
    }
});

public class BranchesController : Controller
{

private IRepositoryBase<Branches> BrancheRepository;

public BranchesController()
{
    this.BrancheRepository = new BranchesRepository(new HrmDBContext());
}
public BranchesController(IRepositoryBase<Branches> brancheRepository)
{
    this.BrancheRepository = brancheRepository;
}

// GET: Branches
[HttpGet]
public ActionResult Index()
{

   // var branches = BrancheRepository.GetAll();




    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}

     return View();
}

[HttpGet]
public JsonResult GetAllBranches()
{

    var branches = BrancheRepository.GetAll();




    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}
    //return new JsonResult { Data = branches, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
     return Json(branches, JsonRequestBehavior.AllowGet);
  //  return new JsonResult{Data = branches, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
   }

 }

Index.cshtml

<div>
    <div class="container" ng-controller="branchcontroller">
        <div class="panel panel-info">
            <div class="panel-heading">
                Branch Details - Grid CRUD operations
            </div>
            <table class="table table-bordered">
                <thead style="background-color:lightblue;">
                    <tr>
                        <th> Branch Address</th>
                        <th> Branch Email</th>
                        <th>Branch Name</th>
                        <th>Branch Notes</th>
                        <th> Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="branche in Branches track by $index">
                        <td>{{branche.Branch_ID}}</td>
                        <td>{{branche.Branch_Address}}</td>
                        <td>{{branche.Branch_email}}</td>
                        <td>{{branche.Branch_Name}}</td>
                        <td>{{branche.Branch_Notes}}</td>
                        <td style="width:200px;">
                            <a href="#" class="btn btn-info">Update</a>
                            <a href="#" class="btn btn-danger">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>