title: Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave
body: <p>I have a directive that shows a list of student information on a template and on mouseenter it then shows additional student information. I want to be able to go back to the initial state on mouseleave.</p>
  
  <p>Tried all the resources and not much luck.</p>
  
  <p><strong>html - this is where i'm injecting my directive</strong></p>
  
  <pre><code>&lt;div ng-repeat="student in studentPortfolio"&gt;
  &lt;portfolio-view student="student"&gt;&lt;/portfolio-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>html directive template</strong></p>
  
  <pre><code>&lt;div class="outer-box"&gt;
    &lt;img src="{{student.picture}}" alt="{{student.name.first}} {{student.name.last}}" style="width: 200px; height: 200px"&gt;
    Name: {{student.name.first}} {{student.name.last}}
    &lt;br&gt;Bio: {{student.Bio}}
    &lt;br&gt;
    Skills:
  &lt;div ng-repeat="skill in student.skills"&gt;
  {{skill.title}}
    &lt;/div&gt;
  
    &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>directive</strong></p>
  
  <pre><code>app.directive('portfolioView', function() {
    return {
      restrict: 'E',
      scope: {
        student: "="
      },
      templateUrl: '/html-templates/hoverPortfolio.html',
      link: function(scope, elem, attrs) {
        //gets the first project and shows it
        var project = scope.student.projects;
        var firstProject = project[0];
        var fp_name = firstProject.name;
        var fp_type = firstProject.projectType;
        var fp_description = firstProject.description;
        //gets the second project and shows it
        var secondProject = project[1];
        var sp_name = secondProject.name;
        var sp_type = secondProject.projectType;
        var sp_description = secondProject.description;
        //the template that shows the second project
        var newHtml =
          '&lt;div class="projects outer-box"&gt;&lt;div class="firstproject"&gt; Project Name: ' +
          fp_name + '&lt;br&gt;Type: ' + fp_type + '&lt;br&gt;Description: ' +
          fp_description +
          '&lt;/div&gt;&lt;br&gt;&lt;div class="secondproject"&gt; Project Name: ' +
          sp_name + '&lt;br&gt;Type: ' + sp_type + '&lt;br&gt;Description: ' +
          sp_description +
          '&lt;/div&gt; &lt;/div&gt;';
  
        elem.on('mouseenter', function() {
          elem.html(
            newHtml
          )
        });
  
        elem.on('mouseleave', function() {
        //return to intial state
        });
      }
    }
  });
  </code></pre>