Using Angular with Bootstrap Modal Multiple Issues

Issue

The short question...Is there any way to use ng-disable on a Boostrap Modal Dialog when a form in a Partial View displayed in the Modal is Invalid?

The long question... I am working in Asp.net MVC. I need to include a Partial-View in a Modal form. I need the form to display details when an item is clicked so that it can be edited, or display a blank form for the user to add a new record. I can get everything to work just perfectly using Bootstrap Modal (data-target) to open the dialog. However, because I am using ng-click to save the changes to my database. I cannot close the dialog with data-dismiss because the button is in the partial view. If I remove the save button from the partial and put it on the parent it works fine, but then, my ng-disable doesn't work for form validation. I thought I had solved the whole thing by switching to Angular ui-Modal, but when I include that code, it works fine when displaying details of an exisiting record, but won't open the modal at all to display a blank form for a new record. This has been driving me crazy for hours.

So here it is...I need to either to close the Bootstrap Modal from my Angular Controller using ng-click, or I have to figure out how to display the blank form using Angular ui-Modal. Please help!

Here is my modal in my cshtml View:

<div class="container">
            <!-- Modal -->
            <div class="modal fade" id="addNewComment" role="dialog">
                <div class="modal-dialog modal-lg">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header" style="background-color:#003A5D; color:white">
                            <h4 class="modal-title">Comment View</h4>
                        </div>
                        <div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
                        <div class="modal-body">
                            @Html.Partial("_AddNewComment")
                        </div>
                        <div class="modal-footer">

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

        </div>

Here is the Partial View that gets rendered:

<div class="panel panel-primary">
    <div class="panel-heading">Add New Comment</div>
    <div class="panel-body" ng-repeat="cm in selection.comment">
        <form name="CommentForm">
        <table style="width:100%; border:none">
            <tr>
                <td style="border:none">
                    Short Comment (displayed on the Contractor's homepage)<br />
                    <div style="font-size:8px">Max 50 characters</div><br />

                        <input name="ShortComment" type="text" style="width:250px" value="{{cm.vchShortComment}}" ng-model="cm.vchShortComment" required />


                    <div role="alert"> <span class="error" ng-show="CommentForm.ShortComment.$error.required">Short Comment is required!</span></div>
                </td>
                <td style="border:none;width:40%">
                    <div class="panel panel-default">
                        <div ng-controller="ContractorCtrl">
                            <br />
                            <p class="input-group">
                                <span style="padding-left:30px">Start Date:</span><span style="float:right">
                                    <input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="startDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />

                                </span>
                                <span class="input-group-btn">
                                    <button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                            </p>
                        </div>
                        <div ng-controller="ContractorCtrl">
                            <p class="input-group">
                                <span style="padding-left:30px">End Date:</span><span style="float:right">
                                    <input type="text" style="width:200px; height:30px" class="form-control" datepicker-popup="shortDate" ng-model="endDate" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="false" close-text="Close" />

                                </span>
                                <span class="input-group-btn">
                                    <button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                            </p>
                        </div>
                        <br />
                        <span style="padding-left:30px">Created By: {{user}}</span>
                        </div>
                </td>
            </tr>
        </table>
        Long Comment (shown as Pop-up on the Contractor's homepage)<br />
        <div style="font-size:8px">Max 2000 characters</div><br />
        <textarea style="width:100%;height:200px" ng-model="cm.vchLongComment" required>
            {{cm.vchLongComment}}
        </textarea>
        <br />
            <div>
                <span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>

            </div>
        </form>


    </div>
</div>

Here is the code from my Angular Controller:

 $scope.clickTest = function (comment) {
        debugger;
        $scope.selection.comment.splice(comment);


    };
    $scope.ShowDetails = function (comment) {
        debugger;
        if (comment == undefined)
        {
            comment = [
                {
                    id: 0,
                    vchShortComment: 'please add short comment',
                    vchLongComment: 'please add long comment'
                }
            ]
        }
        $scope.selection.comment.push(comment);
         //modalInstance = $modal.open({
        //    templateUrl: 'addNewComment',
        //    controller: ModalInstanceCtrl
        // });

    };

    var ModalInstanceCtrl = function ($scope, $modalInstance) {


        $scope.ok = function () {
            $modalInstance.close($scope.selected.item);
        };

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

    };

Solution

I was able to solve all of my issues by wrapping the entire Modal in "" tags. I put the buttons in the modal-footer and now data-target, data-dismiss and form validation all work as desired. Below is the NEW HTML for the Modal. I hope this helps someone else!

 <form name="CommentForm">
    <div class="modal fade" id="addNewComment" role="dialog">
        <div class="modal-dialog modal-lg">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header" style="background-color:#003A5D; color:white">
                    <h4 class="modal-title">Comment View</h4>
                </div>
                <div style="background-color:red;color:white;margin-top:-3px">Questionnaire is Incomplete</div>
                <div class="modal-body">
                    @Html.Partial("_AddNewComment")
                </div>
                <div class="modal-footer">
                    <span style="float:left"><button type="button" class="btn btn-danger">Delete Comment</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary">Archive</button></span><span style="float:right"><button type="button" style="background-color:#adabab; color:White; border-color:#adabab" data-dismiss="modal" class="btn btn-default" ng-click="clickTest()">Cancel</button>&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-dismiss="modal" ng-disabled="CommentForm.$invalid" ng-click="saveComment()">Save</button></span>

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

Answered By - Rani Radcliff