0

This is my first ever code written in angular after a 2-hour investigation and code play. Seems my knockout background doesn't help here. Please have a look at my code : 

var dc = angular.module("DC", []);
dc.factory("incomeCategories",function($rootScope, $http) {
    var categories = {};

    $http.get("app/Categories/GetIncomeCategories").success(function(data) {
        categories = data;
    });
    return categories;
});
dc.controller("CategoriesController", function($scope, $http, incomeCategories) {
    $scope.incomeCategories = incomeCategories;
    $scope.incomeCategory = {};
});

Now here is my select option : 

<select class="form-control" ng-model="incomeCategory" ng-options="ic.title for ic in incomeCategories"></select>

I think at the time of binding the incomeCategories is not loaded. But it should update the UI as it get populated right? like observables in knockout.

Milad
  • 552
  • 1
  • 4
  • 20
  • 1
    The problem (unverified) looks to be that you're returning `categories` as empty (call this object a), and when the AJAX call returns, you set `categories` to reference `data` (object b). That doesn't mean that object a is updated. – Joachim Isaksson Mar 30 '14 at 18:25
  • Thank you @JoachimIsaksson I removed the loading from service and put it inside of my controller then it worked as expected. I still haven't figured out why the previous one wasn't working though. Is this best practice to directly communicate with you back-end inside your controllers? – Milad Mar 31 '14 at 06:32

1 Answers1

1

You might want to look at https://stackoverflow.com/a/18218579/56465 for a solution.

If you are using AngularJS 1.2 and want to use a simple

return $http.get("app/Categories/GetIncomeCategories")

in your factory, then you might want to turn on

$parseProvider.unwrapPromises(true)

as mentioned in the AngularJS 1.2 migration guide

Community
  • 1
  • 1
rajasaur
  • 5,340
  • 2
  • 27
  • 22