How to bind value to angularjs directive?

Question

I am working on a directive to create a custom dropdown. I have managed to bring the directive code to get it replaced.

Below is the directive tag in the html

<dropdown placeholder="Country.." list="count" selected="item" property="name"></dropdown>

Below is the html template that replaces the directive tag

<div class="dropdown-container" ng-class="{ show: listVisible }">
<div class="dropdown-list">
    <div>
        <div ng-repeat="item in list" ng-click="select(item)" ng-class="{ selected: isSelected(item) }">
            <span>{{property !== undefined ? item[property] : item}}</span>
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>

Below is the angularjs directive

App.directive("dropdown", function ($rootScope) {
return {
    restrict: "E",
    templateUrl: "/app/dropdownTemplate.html",
    scope: {
        placeholder: "@",
        list: "=",
        selected: "=",
        property: "@"
    },
    link: function (scope) {
        scope.listVisible = false;
        scope.isPlaceholder = true;

        scope.select = function (item) {
            scope.isPlaceholder = false;
            scope.selected = item;
        };

        scope.isSelected = function (item) {
            return item[scope.property] === scope.selected[scope.property];
        };

        scope.show = function () {
            scope.listVisible = true;
        };

        $rootScope.$on("documentClicked", function (inner, target) {
            console.log($(target[0]).is(".dropdown-display.clicked") || $(target[0]).parents(".dropdown-display.clicked").length > 0);
            if (!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0)
                scope.$apply(function () {
                    scope.listVisible = false;
                });
        });

        scope.$watch("selected", function (value) {
            scope.isPlaceholder = scope.selected[scope.property] === undefined;
            scope.display = scope.selected[scope.property];
        });
    }
}
});

I am trying to get the list of countries from another controller whose function is as follows,

addressService.getCountries().success(function (response) {
    angular.copy(response, $scope.list);
}

How do I bind the values from the controller to my directive when the page loads?

EDIT: What do I do as the directive loads before the function addressService.getCountries() gets called?

Answer 1

you can make a factory that will be useful throughout project to make to make a variable accessible whenever and wherever, in any controller or in any directive you want to use that variable you can easily access

this is how we can make factory,

(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
 return {
 credentials : {},
 };
 });
 })();

After making this factory you can inject this module in your module and this factory in your controller

whenever you want you can use this like

addressService.getCountries().success(function (response) {
datafactory.country = response
}

in your controller

$scope.myvar =datafactory.country

in future you use this factory for any such variable that will be accessible everywhere for example you want to store list of state globally

datafactory.state =["abc","def","xyz"]