Question: I am having a problem with angular custom directives. 

JS

```
app.directive('myElement', function () {
    return {
        scope: {
          item: '=i'
        },
        restrict: 'EA',
        replace: false,
        template: '<td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td>'
    };

```

HTML

```
  <div ng-controller="MyCtrl">
<table class="table table-hover" border=1>
    <tr ng-repeat="p in people">
      <td my-element i="p"></td>
    </tr>
</table>

```

This template is not rendering as 2 "TD" tags it is only rendering the "TD my-element" from the html with binded data inside. 

If I change the template to

```
template: '<div>Name: {{ item.name }}</div> <div>Age: {{ item.age }}</div>'

```

The page renders with 2 div "DIV" inside the "TD my-element"

If I make replace=false everything goes away. 

Why is the TD acting different than the DIV

<http://jsbin.com/iMezAFa/168/edit>

Answer: 
because you have replace false, it puts the template inside the container element. You can't have two `<td>`s inside a `<td>`, that's just invalid markup. But you can have two `<divs>` inside a `<td>`.
Try adding it as follow ..

```
template: '<table><tr><td>Name: {{ item.name }}</td> <td>Age: {{ item.age }}</td></tr></table>'

```