title: Having trouble creating a conditional template item in a AngularJS directive
body: <p>So I'm a Java/Python developer that was thrown onto an AngularJS project.</p>
  
  <p>I was able to easily grasp most of the concepts but some of the syntax/functionality still eludes me.</p>
  
  <p>I have this code that handles the login/logout functionality. If the user is logged in, it should show X. I'm trying to change it so that the offered template is conditional.</p>
  
  <pre><code>if loggedIn
     show this
  else
     show this
  </code></pre>
  
  <p>I know that I have to use the template variable to set the generated HTML for the page. How would I go about creating that?</p>
  
  <p>This is the code that I'm trying to change.</p>
  
  <pre><code>.directive('login', ['loginService', function(loginService) {
      return {
          restrict: "E",
          replace: true,
          template: '&lt;div ng-show="session.loggedIn" class="loginwidget"&gt;Logged In: {{ session.username }} &lt;button ng-click="session.logOut()"&gt;Log Out&lt;/button&gt; &lt;/div&gt;',
          //scope: { user: '=' },
          link: function(scope,element,attrs) {
              scope.session = loginService.session();
          }
      };
  }])
  ;
  </code></pre>
  
  <p>The project is in AngularJS v1.0.8. I'm planning to upgrade it when I can since the <strong>ng-if</strong> directive was introduced later and I think that'll solve some of the problems. I also wanna make sure that the project uses an up-to-date version of the AngularJS library.</p>