In the below html, i'm trying to display a table which consists of 8 cells
.Each cell displays an image, onClicking on image it call changeImage function which gets the image id and changes the image.

```js
//But its changing only one cell's image.When i click on image of any cell in table only first cell's image is changing.I know it is because of  id="myImage" declared in img tag.I'm trying to generate Seperate Id for each image but unable to do so.
function changeImage() {
  var image = document.getElementById('myImage');
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="bottom">
  <table id="t01" ng-if="Obj.Element">
    <tr>
      <th>hello</th>
      <th ng-repeat=" ElementObj in Obj.Element"> {{ElementObj.a.b}}</th </tr>
      <tr>
        <div class="tooltip">
          <th>{{Obj.c}}</th>
          <span class="tooltiptext">{{Obj.d}}</span>
        </div>

        <th ng-repeat="  ElementObj in Obj.Element">
          <div>
            <img id="myImage"  ng-click="changeImage()" src="pic_bulboff.gif" width="100" height="180">

          </div>
        </th>
      </tr>
  </table>
</div>
```

Objective : When i click on individual cells of table it should change the image. i'm trying to display a table which consists of 8 cells.Each cell displays an image, onClicking on image it call changeImage function which gets the image id and changes the image.