Unable to bind option in dynamic html body by directive in angularjs

See more:

AngularJs

hello frdz ...i m learning angularjs...and i need your help to understand it. I need to create a directive so that i can dynamically generate dropdown(<select> element) and bind the value of drop down with respect to another dropdown. Then value is coming properly from service to local scopevariable but unable to bind with html body which is created dynamically.

level dropdown is binding properly with 'selectedLevelOption' but others Jurisdiction dropdown options are are binding with 'selectedJurisdiction[xid]'

My Directive

'use strict';
(function (ng, app) {
    app.directive('jurisdictionSelector', function ($compile, service) {
        return {
            restrict: 'A',
            scope: {
                //title: '@'
            },
            template: '<div class="form-group"></div>',
            link: function (scope, element, attrs, controller) {

                 scope.selectedJurisdiction = [];

                function getJurisdiction(ParentJurisdictionId,xid) {
                    service.getJurisdictionByLevelId(ParentJurisdictionId).then(function (resp) {
                        scope.Jurisdiction = resp.data.GetJurisdictionByLevelIdResult;
                        scope.selectedJurisdiction[xid] = scope.Jurisdiction;
                    }, function (err) {
                        var r = err;
                    });
                }

                function getLevelAll() {
                    service.getLevelAll().then(function (resp) {
                        scope.selectedLevelOption = resp.data.GetLevelAllResult;
                        var strHtml = ' <div class="col-sm-2 control-label">Select Level : </div><div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Level.Level_Name for Level in selectedLevelOption track by Level.M_Level_Id " data-ng-model="Level" ng-change="fillLevel(Level.M_Level_Id)"></select></div> <div class ="panel-body"/>'
                        element.find('.form-group').append($compile(strHtml)(scope))
                    }, function (err) {
                        var r = err;
                    });
                }

                scope.fillLevel = function (value) {
                    element.find('.panel-body').html('');
                    for (var i = 1; i <= value; i++) {
                        var strJurisdiction = '';
                        strJurisdiction += '<div class="form-group">';
                        strJurisdiction += '<div class="col-sm-2 control-label">Level ' + i + '</div>';
                        strJurisdiction += '<div class="col-sm-6"><select class="form-control chosen-select" data-ng-options=" Jurisdiction' + i + '.Jurisdiction_Name for Jurisdition' + i + ' in selectedJurisdiction['+i+'] track by Jurisdiction' + i + '.M_Jurisdiction_Id " data-ng-model="Jurisdiction' + i + '" ng-change="fillJurisdiction(Jurisdiction' + i + '.M_Jurisdiction_Id)"></select></div>';
                        strJurisdiction += '</div>';
                        element.find('.panel-body').append($compile(strJurisdiction)(scope))
                    }
                    scope.fillJurisdiction = function (value) {
                        getJurisdiction(value,1);
                    }
                }

                getLevelAll();
                getJurisdiction(0,1);
            }
        };
    });
})(angular, mainApp);

my html page

<div jurisdiction-selector></div>
                 <div>