How to bind a select element to angular object?

Question

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.

Answer 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