Question: I have an `EmployeeService` that I inject into an `EmployeeController`. The `EmployeeService` contains an object.

I bind Service object into Controller Scope:

```
app.controller('EmployeeController', function($scope, EmployeeService) {
    $scope.employee = EmployeeService.getEmployee();
}

```

HTML template displays the name of the Employee:

```
{{employee.name}}

```

If I manipulate the employee object in the `EmployeeService` ... i.e. `EmployeeService.getEmployee().name = 'new name'`, the template displays the new name.

However, if I **replace** the employee object in the `EmployeeService` ... i.e. `EmployeeService.setEmployee({name: 'new name'})` the template does not display the new name.

Why is replacing the Service object not reflected in the template?

I have the following Plunk that demonstrates this: <http://plnkr.co/edit/k7oKd1VgsBvMGvVdP5kM?p=preview>

In my Plunk, Employee Controller/Service works and Manager Controller/Service does not.

If anyone could help me understand what is going on I would really appreciate it.

Answer: 
```css
body{padding:20px 100px}

a img{display:block;border:none;}

.image-holder{
 float:right;
 margin:42px 560px 0px 0;
 width:300px;
 height:350px;
 background:#ffffff;
 border:10px solid #000;
 padding:3px;
 position:relative;
 z-index:1;
}
ul.links{
 list-style:none;
 margin:0 0px;
 padding:0;
 border:5px solid #000;
 border-bottom:none;
 width:100px;

}
.links li{
 width:100px;
 border-bottom:10px solid #000; 
}

.links li a span{
 position:absolute;
 right:682px;
 top:222em;
 width:300px;
 height:300px;
 z-index:2;
        text-align:center;
}
.links li a:hover{
 background:teal;
 color:#0f0;

}
.links li a:hover span {top:200px;

}

h1{text-align:center;margin:1em 0;}
```

```html

 <p class="image-holder"></p> 
 <ul class="links"> 
  <li><a href="image1.jpg"><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /><em>Some Text</em></span></a></li>
 </ul> 
```

Simply add a tag in span after `<img>` tag as i used in above code and if you want to align it to center then add `text-align:center;` property to span css as i used above.
I would recommend using javascript if that is valid:

```
<li onmouseover="onMouseOverImage(1)">
    <a href="image1.jpg">
        <img src="image1.jpg" width=100 height=100>
        <span>
            <img src="image1.jpg" width="300" height="300" alt="example image" />
        </span>
    </a>
</li>

```

And then add the javascript handling. If you use jQuery it would become more easier:

```
<script>
    function onMouseOverImage(imageNumber) {
        var text = getTextForImage(imageNumber);
        var element = document.getElementById("IdOfTextDisplay");
        element.innerHtml = text;
    }
</script>

```

or with jQuery:

```
<script>
    function onMouseOverImage(imageNumber) {
        $("IdOfTextDisplay").text(getTextForImage(imageNumber));
    }
</script>

```

No guarantee on syntax. ;)

EDIT: You may have to place the event registration (onmouseover="onMouseOverImage(1)") into your link (a) or img. I'm not sure right now about that.