<div class="sq-players-wrapper">
	<webcam channel="webcam"></webcam>
	<ul class="sq-players" ng-repeat="player in model.players track by $index">
		<!-- <player person="player"></player> -->
		<li class="sq-player" ng-class="{'active': playerData.player._id == player._id}">
			<span>{{player.name}}</span>
			<img src="{{player.img}}"/>
		</li>
	</ul>
	<button
		class="btn btn-primary"
		ng-class="{
			'hide': playerData.player || model.players.length == 6,
		}"
		ng-click="playersCtrl.create()">Join
	</button>
	Total Players: {{model.players.length}}
</div>

<div class="sq-players-wrapper">
	<webcam channel="webcam"></webcam>
	<ul class="sq-players" ng-repeat="p in model.players track by $index">
		<player player="p"></player>
	</ul>
	<button
		class="btn btn-primary"
		ng-class="{
			'hide': playerData.player || model.players.length == 6,
		}"
		ng-click="playersCtrl.create()">Join
	</button>
	Total Players: {{model.players.length}}
</div>

Use the player component template <player> for each player now
Use the player component template <player> for each player now
