Value is added to scope but inaccessible from modal
<p>I want to add a value to the controller's $scope once a button is pressed. </p>

<p>This will be accessed by the modal.</p>

<p>After the button is pressed, the value (<code>item</code>) is added to the $scope as expected. </p>

<p><a href="https://i.stack.imgur.com/0YA6J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0YA6J.png" alt="enter image description here"></a></p>

<p>However, in the modal <strong>phrase-item</strong> below, when I attempt to access the value it is not visible:</p>

<pre><code>&lt;ion-modal-view&gt;

    &lt;ion-header-bar&gt;
        &lt;h1 class="title"&gt;{{ item }}&lt;/h1&gt;
        &lt;div class="buttons"&gt;
            &lt;button class="button button-stable" ng-click="closeModal()"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
    &lt;/ion-header-bar&gt;

    &lt;ion-content&gt;
    &lt;/ion-content&gt;

&lt;/ion-modal-view&gt;
</code></pre>

<p>This is my code so far.</p>

<p><strong>controller.js</strong></p>

<pre><code>/**
*
*/
function PhraseListCtrl($scope, $stateParams, CategoryService, ModalService) {

    $scope.categoryId = $stateParams.categoryId;
    $scope.category = $stateParams.category;

    CategoryService.getCategoryDetail($scope.categoryId).then(function(dataResponse) {
        $scope.categoryDetail = dataResponse.data;

        var replacers = CategoryService.getCategoryFilter();

        $scope.categoryDetail.forEach(function(e){
            Object.keys(replacers).forEach(function(key){
                e['phrase_filter'] = e['phrase_filter'].replace(new RegExp(key, 'g'), replacers[key]);
            })
        })

    })


    // Get value of button

    $scope.getItem = function(item) {
            $scope.item = item;
    }


    // Modals

    $scope.phraseItemModal = function() {
            var vm = $scope;
            console.log(vm);
            ModalService.show('templates/modals/phrase-item.html', 'PhraseListCtrl as vm');
        }

}
</code></pre>

<p><strong>services.js</strong></p>

<pre><code>/**
*
*/
function CategoryService($http) {

    this.getCategoryList = function () {

        return $http({
            method: 'GET',
            url: 'http://dingocv.herokuapp.com/api/category/',
        });

    }


    this.getCategoryDetail = function (categoryId) {

        return $http({
            method: 'GET',
            url: 'http://dingocv.herokuapp.com/api/category/' + categoryId,
        });

    }

    this.getCategoryFilter = function () {

        var replacers = {
            '{{group}}' : '&lt;a ng-click="getItem(\'Group\'); phraseItemModal()" class="button button-small button-outline button-positive button-side-padding"&gt;group&lt;/a&gt;',
            '{{attribute}}' : '&lt;a ng-click="phraseItemModal()" class="button button-small button-outline button-assertive button-side-padding"&gt;attribute&lt;/a&gt;',
            '{{factor}}' : '&lt;a ng-click="phraseItemModal()" class="button button-small button-outline button-assertive button-side-padding"&gt;factor&lt;/a&gt;',
            '{{person}}' : '&lt;a ng-click="phraseItemModal()" class="button button-small button-outline button-positive button-side-padding"&gt;person&lt;/a&gt;'
        }

        return replacers;

    }

}
</code></pre>