How to close a dialog box in angularjs

Question

I am showing a popup for signup form and in that when i click on terms i am showing another popup but the problem is when i close the terms popup the previous signup modal is also closing.

HTML

<div class="modal-header">
    <h3 class="login-header" ng-if="showLoginForm" >Login to your account. Don't have an account? <a href="#" ng-click="showForm('register')">Register</a> for free!</h3>
    <p class="register-header" ng-if="showRegForm" >Please register for <b>free!</b> We collect certain information about you to provide personalized recommendations. (Don't worry) We will never share your personally identifiable information. <a href="#" ng-click="navigateFaq()">[Read More]</a></p>
    <h3 class="register-header" ng-if="showForgotForm" >Reset password</h3>
</div>
<div class="modal-body paddingmodal2">
     <div class="col_full">
         <input type="checkbox"  ng-class="{'error': submitted && registerLoginForm.terms.$error.required}"  name="terms" value="check"   id="agree"  ng-model="register.terms" required/> I agree to the XpertDox <a href="#" ng-click="termsandPolicy('terms')">Terms of Use</a> & <a href="#" ng-click="termsandPolicy('privacy')">Privacy Policy.</a>
     </div>
</div>

<div class="modal fade termmodal" id="terms-model" tabindex="-1" role="dialog" aria-labelledby="myModaqlLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modal-content">
                <div ng-include="'app/templates/terms-model.html'"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade termmodal" id="policy-model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-body">
            <div class="modal-content">
                <div ng-include="'app/templates/policy-model.html'"></div>
            </div>
        </div>
    </div>
</div>

JS

$scope.termsandPolicy = function(type){
    if(type == 'terms'){
         $scope.showTerms = true;
         $('#terms-model').modal('show');
    }else{
         $('#policy-model').modal('show');   
    }

I just put above code in my main modal ,can anyone help me please.

Answer 1

之所以发生这种情况是因为两个模态都在同一主模型，控制器和同一模型中，如果将其中一个模型更改为$ rootScope，则它将被解析。