Question: I'm implementing a login form in angularjs and I have a bootstrap alert pop up when the login either fails or succeeds. 
The problem is When the page is refreshed, pop up is always here.

This is my html:

```
<div class="alert alert-success" role="alert" ng-if='loggedin'>
  Logged in successfully!
</div>
<div class="alert alert-danger" role="alert" ng-if='!loggedin'>
  Log in failed!
</div>

```

How do I make them hide when either the page is:

1. Loaded for the first time or
2. refreshed

Answer: 
Remember when you set a `scope` to your view or controller the first value of that `scope` is `false`.

For example `scope.loggedin` first is `false` until in your controller we change it to `true`.

**Solution:**

controller:

```
scope.login = function(){
  scope.tryToLoginIn = true;

  //..your code : this is just example
  $http.get("loginApi").then(function(respponse){
     if(respponse.status === 200){
        scope.loggedin = true;
     }
  })
}

```

Html:

```
<div class="alert alert-success" role="alert" ng-if='tryToLoginIn && loggedin'>
  Logged in successfully!
</div>

<div class="alert alert-danger" role="alert" ng-if='tryToLoginIn && !loggedin'>
  Log in failed!
</div>

```

Here we check if `tryToLoginIn` is `true` and then start check `loggedin` conditions to show your popup alert.
It seems like you need another parameter to detect whether a login attempt was made or not.

```html
<div class="alert alert-success" role="alert" ng-if='!anonymous && loggedin'>
  Logged in successfully!
</div>
<div class="alert alert-danger" role="alert" ng-if='!anonymous && !loggedin'>
  Log in failed!
</div>

```

you will need to persist this data somehow in the browser and populate both parameters anonymous and loggedin accordingly. options are 'cookies, html5 storage'