$scope unidefined in modal angular js

Question

i am using modal in angular but when modal open so here values are not binding with model i don't know why this happening must be appreciates if some corrected if there is any mistake thanx.

modal.html

<script type="text/ng-template" id="categoryModal.html">

    <form class="form-horizontal" name="category_form" novalidate>
        <div class="modal-header">
            <a class="close" ng-click='cancel()'><i class="icon-remove-circle icon-bold"></i> </a>
            <h3>Category</h3>
        </div>

        <div class="modal-body">

            <div class="form-group">
                <label for="category_Name" class="col-lg-3 form-label">Category Name:</label>
                <div class="col-lg-8">
                    <input class="form-control" id="category_Name" ng-model="category.name" name="category_Name" placeholder="Category Name" required/>
                    <div class="error" ng-show="category_form.category_Name.$dirty && category_form.category_Name.$invalid">
                        <small class="error errorFields" ng-show="category_form.category_Name.$error.required">
                            Category Name is required.
                        </small>

                    </div>
                </div>
            </div>

        </div>

        <div class="modal-footer">
            <button  ng-click='saveCategory()' class="btn btn-primary" ng-disabled="category_form.$invalid">
                <i class="icon-ok-sign icon-white"></i> Add
            </button>

            <button ng-click='cancel()' class="btn btn-warning">
                <i class="icon-remove-circle icon-white"></i> Cancel
            </button>
        </div>

    </form>
</script>

modalController.js

app.controller('brandModalCtrl', function ($rootScope, $scope, $modalInstance) {

    // Save Brand

    $scope.saveCategory = function () {
       console.log($scope.category) // undefined
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

});

and where do you call `categoryModal.html` and how do you define `$modalInstance`? thanks — Maxim Shoustin, Nov 16 '13 at 21:11
Where is `$scope.category` defined? You need to set a value to `$scope.category` — Jonathan de M., Nov 16 '13 at 21:13
i called this modal from other view using $modal every thing going proper modal opening modal closing just not getting value — Wajihurrehman, Nov 16 '13 at 21:16
@ Jonathan de M values automatically bind in angular if we define ng model directive so when i will take input in html tag it will automatically bind but in this case its not working — Wajihurrehman, Nov 16 '13 at 21:18
You need to write something in your input first to initialize your model — Jonathan de M., Nov 16 '13 at 21:23
i wrote after that but undefined that's why i post here problem — Wajihurrehman, Nov 16 '13 at 21:24
Weird [I created a jsbin](http://jsbin.com/aCOkOLIy/1/edit) and if you write something in the input before to trigger the `console.log` then I could see the category object — Jonathan de M., Nov 16 '13 at 21:28
@ Jonathan de M yeah you are write but in modal i saw many post its showing but not got proper answer u can search $scope not defined in modal angular u will see here thing that people facing problems. — Wajihurrehman, Nov 16 '13 at 21:35
http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal?rq=1 you can see here also — Wajihurrehman, Nov 16 '13 at 21:36
you can't inject a $modalInstance into your controller. You can inject $modal and use $modal.open() to create a $modalInstance. — user3360944, Mar 03 '14 at 15:04

score 0 · Answer 1 · answered Jan 22 '16 at 01:05

I would try adding the same $scope to modalOptions and letting the modal share the controller's $scope variables. Putting both onto $rootScope is too drastic. Ideally, your modal should have an isolate scope, but it sounds like you need some overlap.

$scope unidefined in modal angular js

1 Answers1