Update Angular view from SignalR callback - angularjs

Question

Is there any way that I can create a template in AngularJS but not run it until some event?
Actually I am using SignalR. So when server calls a client function then I want some HTML to show based on the data sent by server.
Suppose I am making a Chess Game.
I don´t have the board to display on the page until the server sends it.
In HandleBar I can create a template and when the server sends the board in json format I can compile the template and display it on page.
gameHub.client.buildBoard = function(game){
var template = Handlebars.compile($("board-template").html());
$("board").html(template(game.Board))
}
This builBoard function gets called by server.
In AngularJS I have to create a Controller, but the $scope.board has not loaded let.
The angular Code is
<div ng-app="game">
<div ng-controller="boardController">
<div ng-repeat="row in board.Pieces">
// Display Pieces
</div>
</div>
JS
var app = angular.module("game", []);
app.controller("boardController", function ($scope) {
$scope.size = 5;
$scope.board= [];
});
Here the board is initialized to empty array.
Now the server will call the buildBoard() function with the necessary data required.
gameHub.client.buildBoard = function(board){
// Code to take this board object and assign it to the $scope.board
}
From here (outside the scope of controller ), how can I update the $scope.board array?

Answer 1

While I believe you should explain yourself a bit more, and show some angular code, I think you are looking for a solution to a problem that angular doesn't have.
Consider this code:
<div class="board-thing" ng-bind-html="board" ng-hide="board === null"></div>
...
.controller('myController', function($scope) {
$scope.board = null;
gameHub.client.buildBoard = function(game) {
$scope.board = game.board;
});
})
When the data is loaded $scope.board is assigned to the data and the view is immediately updated through the scope and ng-bind-html. No need for any compilation!

Answer 2

You can define directives to avoid cluttering your controller with presentation related code.
For all business related code, define services outside of your controller.
In this case, as you want push data, you need to define an event dispatcher ("Server") that will inform the controller when remote changes take place.
Here is an example controller and related template.
angular
.module('app')
.controller("ChessController", function($scope, Server) {
$scope.list = [0, 1, 2, 3, 4, 5, 6, 7];
$scope.pieces = [];
// "Server" is an angular service that abstracts your connection with your server
// which can be based on socket.io, a raw websocket, HTTP polling...
var chessGame = Server.getChessGame('xxx');
chessGame.on('init', function(pieces) {
// pieces == [
// {x: 0, y: 0, type: "pawn", color: "white"}
// {x: 0, y: 3, type: "king", color: "white"}
// {x: 2, y: 0, type: "queen", color: "white"}
// ];
$scope.pieces = pieces;
});
chessGame.on('remote_piece_moved', function(move) {
// remove pieces at destination
$scope.pieces = $scope.pieces.filter(function(p) { return p.x != move.dest_x && return p.y != move.dest_y; })
// move piece.
var piece = $scope.pieces.find(function(p) { return p.x == move.start_x && p.y == move.start_y; });
piece.x = move.dest_x;
piece.y = move.dest_y;
});
});
.directive('chessPiece', function() {
return {
scope: false,
link: function(scope, element) {
scope.$watch('pieces', function(pieces) {
var piece = pieces.find(function(p) { return p.x == scope.col && p.y == scope.row; });
if (piece)
element.html('<img src="pieces/' + piece.type + '-' + piece.color + '.jpg"/>')
else
element.html('');
}, true);
}
}
});
Template
<table ng-controller="ChessController">
<tr ng-repeat="row in list">
<td ng-repeat="col in list" chess-piece></td>
</tr>
</table>