Scope data seem empty after putting json in it - asp.net

Question

I'm trying to get some data from an API in the variable $scope.proposition with the following code
'use strict';
var app = angular.module('app', []);
app.controller('propositionCtrl',['$scope', 'propositionRepository',
function ($scope, propositionRepository) {
// $scope.proposition = { marge_propose: 3 };
function getProposition() {
propositionRepository.getProposition(function (result) {
$scope.proposition = result;
console.log("we put the json in the scope variable");
}
)
}
getProposition();
$scope.proposition = {marge_propose : 3};
}])
app.factory('propositionRepository', function ($http) {
return {
getProposition: function (callback) {
$http.get('/api/propositionapi/3');
console.log("we call the api");
}
}
})
With the following view
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div ng-controller="propositionCtrl">
<p>{{ proposition.marge_propose}}</p>
</div>
It does not work, but when I uncomment the $scope.proposition = { marge_propose: 3 }; everything works just fine.
That's why I assume that it is my getProposition that encounters some problems.
I don't know what it is because firebug actually tells me that the data are well received from the api with the following result
{"$id":"1","t_concours":{"$id":"2","t_proposition":[{"$ref":"1"}],"id":1,"intitule":"test","valeur":10.0},"t_demandeur":{"$id":"3","t_proposition":[{"$ref":"1"}],"id":"1","nom":"dylan","prenom":"bob","note":"A"},"t_index":{"$id":"4","t_proposition":[{"$ref":"1"}],"id":1,"intitule":"test","valeur":10.0},"t_proposition_concurence":null,"id":3,"id_demandeur":"1","date_proposition":"1991-07-05T00:00:00","type":true,"point_de_vente":"01","code":"a","code_sas":"846684","montant_operation_hors_frais":200,"concours_sollicite":10,"duree_concours":10,"type_concours":1,"id_index":1,"apport_personnel":10,"garantie_reelle":true,"in_fine":false,"majoration":1.0,"prospect":true,"primo_accedant":true,"motif_montant":false,"motif_contrepartie":false,"motif_depot_cmne":false,"id_prop_concurence":null,"motif_autre":true,"motif_commentaire":"true","proposition_derogatoire":true,"visa_responsable":"false","marge_grille":5.0,"marge_theorique":7.0,"marge_propose":32.0}
Can someone explain me please where the problem is?
Thanks a lot!
EDIT:
The console log displays "we call the api" but not "we put the json in the scope variable"

Answer 1

'use strict';
var app = angular.module('app', []);
app.controller('propositionCtrl',['$scope', 'propositionRepository',
function ($scope, propositionRepository) {
// $scope.proposition = { marge_propose: 3 };
function getProposition() {
propositionRepository.getProposition(function (result) {
console.log("we put the json in the scope variable");
$scope.proposition = result;
}
)
}
getProposition();
$scope.proposition = {marge_propose : 3};
}])
app.factory('propositionRepository', function ($http) {
return {
getProposition: function (callback) {
$http.get('/api/propositionapi/3').success(callback);
console.log("we call the api");
}
}
})
This code works...
The thing is that I didn't know that $http.get returns a promise, so I forgot to add the .success(callback) in the line
$http.get('/api/propositionapi/3').success(callback);
Now everthing works.
Thanks for the hint MohammedAbbas

Answer 2

You could try to set the extra data as real JSON, eg:
$scope.proposition = { "marge_propose": "3" };
maybe try to console.log in your propositionRepository to view the result you're getting, place a console.log in the getProposition() as well to check if everything is passing trough fine
EDIT:
here's a working fiddle:
http://jsfiddle.net/c1zxp6uo/
bottomline: you don't call the callback, so when you do
$http.get('/api/propositionapi/3').then(function(){callback()})
it should work