Webservice Call using Angular in MVC - angularjs

Question

Can some one please explain how can I call an action using Angular in MVC project?
I managed to call action using Ajax like this:
var app = angular.module('toprightSec', ['ng']);
app.controller('NationalityCtrl', ['$scope', function ($scope, $http) {
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
$scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}
$scope.reloadPage = function () { window.location.reload(); }
$scope.getResult = function ($index, item) {
$.ajax({
type: 'GET',
async: true,
url: 'Login/ChangeOffice',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
officeID: $scope.items[$index].guid,
officeName: $scope.items[$index].name,
},
success: function (msg) {
}
});
};
}]);
I tried changing it to Angular like this:
var AngularModule = angular.module('toprightSec', ['ng']);
AngularModule.service('ApiCall', ['http', function ($http) {
var result;
this.PostApiCall = function (controllerName, methodName, obj) {
debugger;
result = $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data, success) {
result = (data);
}).error(function () {
("Something went wrong");
});
return result;
};
}]);
AngularModule.controller('NationalityCtrl', ['$scope', function ($scope, $http, ApiCall) {
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
$scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}
$scope.reloadPage = function () { window.location.reload(); }
$scope.getResult = function ($index, item) {
var obj = {
'officeID' : '123',
'officeName' : 'Sample'
}
var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).success(function (data) {
var data = $.parseJSON(JSON.parse(data));
$scope.message = data;
});
};
}]);
I keep getting this error "PostApiCall" is not defined on browser console.
Any idea what am I doing wrong here?
Thanks.

Answer 1

User promise, return when $http are done:
this.PostApiCall = function (controllerName, methodName, obj) {
debugger;
var deferred = $q.defer();
$http.post('api/' + controllerName + '/' + methodName,obj).success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
};
var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).then(function (data) {
var data = $.parseJSON(JSON.parse(data));
$scope.message = data;
});

Answer 2

Well, I managed to fix it, I noticed two issues with my code:
I was using $http in two different places, and I was using success at both the spots. (solution suggested by charlietfl)
The other issue was that the parameters that I was passing, they were not right.
This is my updated working code:
var app = angular.module('BMSApp', []);
app.factory('ApiCall', ['$http', function ($http) {
var PostApiCall = function (controllerName, methodName) {
return $http.post(controllerName + '/' + methodName);
};
var GetApiCall = function (controllerName, methodName) {
return $http.get(controllerName + '/' + methodName);
};
return {
PostApiCall: PostApiCall,
GetApiCall: GetApiCall
};
}]);
app.controller('NationalityCtrl', ['ApiCall', '$scope', function (ApiCall,$scope) {
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
$scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}
$scope.getResult = function ($index, item) {
var result = ApiCall.PostApiCall("Login", "ChangeOffice/?officeID=" + $scope.items[$index].guid + "&officeName="+$scope.items[$index].name).then(function (data) {
$scope.reloadPage();
});
};
}]);
Thanks everyone for the help.