I need help rendering a table with two columns using angularjs directives.
<table>
<tr ng-repeat="message in messages" >
<td ng-switch-on="message.network" ng-switch when="twitter" ng-controller="TweetController">
<span>
<input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" ng-click="publishMessage($event)" />
</span>
<span>
<img src="{{message.authorPicture}}" />
</span>
<span>{{message.createdAt}}</span>
<span>{{message.network}}</span>
<span>{{message.text}}</span>
</td>
<td ng-switch-on="message.network" ng-switch when="facebook" ng-controller="FacebookController">
<span>
<input type="checkbox" name="active" ng-checked="{{message.isPublished}}" data-id="{{message.socialId}}" data-createdAt="{{message.createdAt}}" ng-click="publishMessage($event)" />
</span>
<span>
<img src="{{message.authorPicture}}" />
</span>
<span>{{message.createdAt}}</span>
<span>{{message.network}}</span>
<span>{{message.text}}</span>
</td>
</tr>
</table>
I am facing an issue where the same message is rendering in both columns instead of separating into twitter and facebook columns. This results in duplicate content being displayed. Can someone please guide me on what I might be doing wrong?