Angular-strap modal scope

Question

I am working with angular-strap and specially with its modal, I am using this style while coding. it is parts of my controller:

function parentController($scope, $routeParams, $location, $modal) {
    var vm = this;
    vm.message = '';
...

The html part of modal:

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" ng-show="title">
                <button type="button" role="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">&times;</span></button>
                <h1 class="modal-title" ng-bind="title"></h1>
            </div>
            <div class="modal-body" ng-bind-html="content">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success pull-left" ng-click="$hide();parentController.f1();" aria-label="Close">yes</button>
                <button type="button" class="btn btn-danger pull-left" ng-click="$hide();parentController.f2();" aria-label="Close">no</button>
            </div>
        </div>
    </div>
</div>

And it is my modal definition in controller:

var modalObject = {
                scope: $scope,
                templateUrl: 'path/to/modal.html',
                title: 'desc',
                content: '<p>enter description here</p> <textarea ng-model="parentController.message" class="form-control" rows="10"></textarea>',
                show: false
            };

$modal(modalObject);

Now, I am going to access to message value in parentController. When I log the vm.message in f2 function, it is empty as it was. What is the solution to access that?

Answer 1

I finally solve the problem by removing content from controller and adding that manually into html code.

var modalObject = {
                scope: $scope,
                templateUrl: 'path/to/modal.html',
                title: 'desc',
                show: false
            };

$modal(modalObject);

The html code of modal:

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" ng-show="title">
                <button type="button" role="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">&times;</span></button>
                <h1 class="modal-title" ng-bind="title"></h1>
            </div>
            <div class="modal-body">
                <p>enter description here</p>
                <textarea ng-model="parentController.message" class="form-control" rows="10"></textarea>
        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success pull-left" ng-click="$hide();parentController.f1();" aria-label="Close">yes</button>
                <button type="button" class="btn btn-danger pull-left" ng-click="$hide();parentController.f2();" aria-label="Close">no</button>
            </div>
        </div>
    </div>
</div>

So, I have the value of textarea in my model