AngularJS ng-repeat with custom element inside a table is rendering strangely

Question

I\'m trying to re-use a portion of my HTML view in multiple places. The portion I want to re-use is table cells in an HTML table. The problem is that my custom directive i

Answer 1

is known to behave strangely in directives like this. Instead, use a directive on the parent . Read more about this issue here: https://github.com/angular/angular.js/issues/1459

Here is how you can further improve your directive so that it is more re-usable.

app.directive('myElement', function () {
  return {
    scope: {
      item: '=myElement'
    },
    restrict: 'EA',
    template: 'Name: {{item.name}}Age: {{item.age}}'
    };
});

and pass in the value of item like so:

Live Demo