Q: How to generate different html content depending on http results in AngularJS? When my page loads I want to make an http call to the server to see if the user's login session is still valid.  The client will send a session key with the current timestamp, and server will compare that timestamp to see if it is longer than its specified timeout period. The server will then return either true or false.
If the http call returns true and the login is valid I want to generate this html:
<li><a href='#logout'>logout</a></li>

If the call returns false and the login has expired I want to show the following:
<li><a href='#login'>login</a></li>

I am not sure how to do this with AngularJS.

A: Angular has built-in directives for conditional rendering:
ng-show / ng-hide: conditionally set display: none style (with .ng-hide class)
ng-if / ng-switch: conditionally add/remove DOM elements.
Either approach would work here. For example:
<li ng-switch="isLoggedIn">
  <a ng-switch-when="true"  href='#logout'>logout</a>
  <a ng-switch-when="false" href='#login'>login</a>
</li>

isLoggedIn can be set whenever you complete the HTTP call.

A: Create a controller
angular.module('yourModuleName').controller('sessionCtrl', ['$scope', '$http', function($scope, $http){
    $http.get('url')
        .success(function(data){
            $scope.loggedIn = data ? '#logout' : '#login'; //true or false 
        })
}]);

And then in your markup
<div ng-controller="sessionCtrl"> 
    <li ng-show="loggedIn"><a href='{{loggedIn}}'>logout</a></li>
</div>

EDIT: You can use ng-if/ng-switch instead of ng-show to optimise performance because this will actually remove the dom object instead of hiding it.  However, in your case it shouldn't matter too much. Furthermore, keep in mind if you're using a version below 1.2, you may not get access to ng-if. ng-switch is also somewhat verbose.
