过滤UI-SELECT显示的AngularJS和PHP数据

i have tried all solutions available on stack, none work try see my code and help. simple ui select of Country calling codes of which i want to set the selected code to the input so i can access it and validate on controller;

PHP CODE

<div class="noscroll" data-ng-controller="internationalPhoneCodesController">
        <span>Phone</span>
        <ui-select class="contact_add_input_lastname" style="margin-right:10px;" ng-model="countryCallingCode" title="Choose a country Code">
            <ui-select-match  placeholder="Search by Country name">+[[ countryCallingCode.calling_code]]</ui-select-match>
            <ui-select-choices repeat="country in countryCodes">
                +<span ng-bind-html="country.calling_code"></span>&nbsp;
                <span ng-bind-html="country.name"></span>
            </ui-select-choices>
        </ui-select>
        <input type="hidden" name="calling_code" value="[[countryCallingCode.calling_code]]">
        {!! Form::text('phone', null, ['class' => 'contact_add_input_lastname', 'placeholder' => '709101000', 'ng-model' => 'contact.phone', 'ng-blur' => 'checkPhone()' ] )!!}
    </div>

ANGULAR CODE

app.controller('internationalPhoneCodesController', ['$scope', 'CountryCallingCodes', function($scope, CountryCallingCodes){

$scope.countryCallingCode = null;
$scope.countryCodes = [];


CountryCallingCodes.get()
    .then(function (response) {
        $scope.countryCodes = response.data;
    });
}])

app.factory('CountryCallingCodes', function ($http) {
return {
    get : function() {
        return $http.get('/api/countryCallingCodes/data/');
    }
}
})

picture added is the display view