UPDATE. Solved problems by adding a watch and also utilizing solution from http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx about initial selection.


More details about the problem

http://stackoverflow.com/questions/33808879/directives-code-fires-before-i-got-data

I can not get the directive to show the initial data correctly :(

Here is the html for the whole directive:

<div class="row">

    <label class="control-label col-md-2" title="dci">@Labels.dci:</label>
   
    <div class="col-md-3">
        <select class="form-control" ng-model="selectedDepartmentId" name="department" id="department"
                ng-options="d.departmeId as d.descrip for d in metaData.departments"
                data-no:dirty-check
                ng-change="departmentChanged(selectedDepartmentId)">

            <option value="">@String.Format(Labels.selectX, Labels.department)</option>
        </select>
    </div>
    <div class="col-md-3">
        <select class="col-md-3 form-control" ng-model="selectedCategoryId" id="category" name="category"
                ng-disabled="!selectedDepartmentId"
                data-no:dirty-check
                ng-change="categoryChanged(selectedCategoryId)"
                ng-options="c.categoryId as c.descrip for c in metaData.categories | filter: {departmeId:selectedDepartmentId}">
            <option value="">@String.Format(Labels.selectX, Labels.category)</option>
        </select>
    </div>
    <div class="col-md-3">
        <select class="col-md-3 form-control" ng-model="selectedItem" id="item" name="item"
                ng-disabled="!selectedCategoryId"
                ng-change="itemChanged(selectedItem)"
                ng-options="c as c.descrip for c in metaData.items | filter: {departmeId:selectedDepartmentId, categoryId:selectedCategoryId}">
            <option value="">@String.Format(Labels.selectX, Labels.item)</option>
        </select>
        <div class="field-validation-error">
            <span ng-show="item.$error.required">@String.Format(Messages.isRequired, Labels.item)</span>
        </div>
    </div>
</div>
<div class="clearfix"></div>

This is the directive's code:

(function () {
    'use strict';

    var app = angular.module('sysMgrApp');

    app.directive('smDci', ['departmentService', 'categoryService', 'itemService', smDci]);

    function smDci(departmentService, categoryService, itemService) {

        var directive = {
            restrict: 'E',
            scope: {
                selectedDepartmentId: '=?departmentid',
                selectedCategoryId: '=?categoryid',
                selectedItemId: '=?itemid',
                selectedDci:  '=?dci'

            },
            controller: ['$scope', 'departmentService', 'categoryService', 'itemService',
                function ($scope, departmentService, categoryService, itemService) {
                $scope.selectedDepartmentId = $scope.selectedDepartmentId || 0;
                $scope.selectedCategoryId = $scope.selectedCategoryId || 0;
                $scope.selectedItemId = $scope.selectedItemId || 0;
                $scope.selectedDci = $scope.selectedDci || '';
                $scope.selectedItem = null;

                var init = function () {
                    $scope.metaData = {};
                    departmentService.getAllDepartments().then(function (data) {
                        $scope.metaData.departments = data.departments;
                    });
                    if ($scope.selectedDepartmentId == 0 && $scope.selectedCategoryId == 0 && $scope.selectedItemId != 0) {
                        itemService.getItemById($scope.selectedItemId).then(function (data) {
                            var item = data.item;
                            if (item != null) {
                                $scope.selectedDepartmentId = item.departmeId;
                                $scope.selectedCategoryId = item.categoryId;
                                $scope.selectedItem = item;
                                getInitialSelections();
                            }

                        });
                    }
                    else {
                        getInitialSelections();
                    }
                };

                var getInitialSelections = function()
                {
                    if ($scope.selectedDepartmentId != 0) {
                        $scope.departmentChanged($scope.selectedDepartmentId);
                    }
                    if ($scope.selectedCategoryId != 0) {
                        $scope.categoryChanged($scope.selectedCategoryId);
                    }
                }

                $scope.departmentChanged = function (departmentId) {
                    if (!departmentId) {
                        $scope.selectedCategoryId = '';
                        $scope.selectedItemId = '';
                        $scop.selectedItem = null;
                        $scope.selectedDci = '';
                    }
                    else
                    {
                        categoryService.getCategoriesByDepartmentId(departmentId).then(function (data) {
                            $scope.metaData.categories = data.categories;
                        });
                    }
                };

                $scope.categoryChanged = function (categoryId) {
                    if (!categoryId) {
                        $scope.selectedItemId = '';
                        $scope.selectedItem = null;
                        $scope.selectedDci = '';
                    }
                    else
                    {
                        itemService.getItemsByCategoryId(categoryId).then(function (data) {
                            $scope.metaData.items = data.items;
                        });
                    }
                };

                $scope.itemChanged = function(item)
                {
                    $scope.selectedItemId = item.itemId;
                    $scope.selectedDci = item.department + item.category + item.item;
                }

                init();
            }],
            templateUrl: 'app/templates/smDci'
        };
        return directive;
    }
})();

And this is how I use it in the form:

<data-sm:dci itemid="currentCardAct.itemId"  dci="currentCardAct.dci"></data-sm:dci>

The problem is that when I open the existing card, everything is showing 'Select Department', 'Select Category', 'Select Item' instead of showing the existing data. I think the problem is in the sequence of events and that the directive has to get the departmentId/categoryId itself.

Do you see a way around the problem or a whole in my logic?

Thanks again.