sign up button disappear after page refreshing

Question

I have problem with sign up button while registering as user, Actually there is check box for T&c. After checking that check box only button should enable. Everything is going well But, when I am refreshing page I am not able to see button, I able to see all other elements even check box. here are Html tags I used for check box and Sign Up button and I also used flags.

<p class="terms"> <div class="chckbx-cntnr zeromargin" style = "padding:2px;vertical-align:middle"><input type="checkbox" id="rd" name="check" class="flashadmin" ng-model="user.tnc" ng-click="setbuttonFlag(user.tnc)" class="flashadmin"><label class="cstmchk_lbladmin" for="rd"></label></div>
           I agree to the <a href="#!terms_conditions" target="_blank">Terms of Use</a> and <a href="#!privacy_policy" target="_blank">Privacy Policy</a>.</p>

<button ng-if="buttonFlag==true" id="signup"class="btn btn-default btn-block btn-login" type="submit" >Sign up</button> <button ng-if="buttonFlag==false" id="signup" class="btn btn-default btn-block btn-login" disabled >Sign up</button>

here is validation i wrote for flag

$scope.buttonFlag=false;
$scope.setbuttonFlag =function(checkbox){
    if(checkbox == true){
        $scope.buttonFlag=true;
    }else{
        $scope.buttonFlag=false;
    }
};

I am getting in console Error: $injector:unpr Unknown Provider

Answer 1

First thing is your code looks clumsy!

Below mistake you did, you misunderstood the concept completely.

Why you required for two submit button in your html? Also no need separate click event for changing button flag.

Now coming to your question:

When I am refreshing page I am not able to see button

This is because your are using ng-if directive in button element at the same time while initiating your controller you set $scope.buttonFlag=false so obviously you can't see button while refresh..

Below snippet will work for you!

 angular.module("app", []).controller("testCtrl", function($scope) { $scope.buttonFlag = false; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="app"> <div ng-controller="testCtrl"> <input type="checkbox" ng-model='buttonFlag'> I agree to the Terms of Use and Privacy Policy. <button ng-disabled='!buttonFlag' id="signup" class="btn btn-default btn-block btn-login">Sign up</button> </div> </div> 

Answer 2

Well upon refresh you are manually setting buttonFlag to false hence the button disappears.Store buttonFlag in localStorage and check the state of buttonFlag unlike setting it to false as you have done.

if(localStorage.getItem('buttonFlag')){
    buttonFlag = localStorage.getItem('buttonFlag');
}
else{
    buttonFlag = false;
}

also instead of using two different button for signup use ng-disabled to disable or enable a button