Какое-то время назад на другом форуме делал одному буржуйскому оболтусу домашнее задание "пятнашки". Ангуляр я не знаю, у меня применяется jQuery. Посмотрите, возможно, вам что-то из кода пригодится.
index.htm
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Fifteen Puzzle</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--link href="fifteen.css" rel="stylesheet" />
<script src="fifteen.js"></script //-->
<style>
body{
font-family:cursive;
}
div{
font-size:40pt;
}
#controls{
text-align:center;
}
#puzzlearea{
width:385px;
height:385px;
margin-left:auto;
margin-right:auto;
}
#score{
text-align:center;
position:absolute;
right:150px;
top:150px;
width:200px;
padding:5px;
font-size:14px;
}
#score b{
color:Crimson;
}
#shufflebutton{
cursor:pointer;
}
.tile{
width: 90px;
height: 90px;
display: inline-block;
border: 1px solid black;
background-color:#f8f8ff;
text-align:center;
margin:2px;
}
.movable{
color:#ccc;
cursor:pointer;
}
</style>
<script>
var xyz=[],
arr=[],
moves=0,
i=1;
for(; i < 17; i++){
arr.push(i);
xyz.push(i);
}
function shuffle(ar){
return ar.sort(function(){return 0.5 - Math.random()});
}
function goround(){
$('#puzzlearea').empty();
for(var k=0; k < arr.length; k++){
if(arr[k]==16){$('#puzzlearea').append('<div class="tile" id="ch-'+arr[k]+'" style="visibility:hidden;">'+arr[k]+'</div>');}
else{$('#puzzlearea').append('<div class="tile" id="ch-'+arr[k]+'">'+arr[k]+'</div>');}
}
find_neighbours();
}
function solve(){
$('#puzzlearea').empty();
for(var k=0; k < xyz.length; k++){
if(xyz[k]==16){$('#puzzlearea').append('<div class="tile" id="ch-'+xyz[k]+'" style="visibility:hidden;">'+xyz[k]+'</div>');}
else{$('#puzzlearea').append('<div class="tile" id="ch-'+xyz[k]+'">'+xyz[k]+'</div>');}
}
$('#score').html('<span style="text-align:center;color:Crimson;font-size:24px;">You WIN!</span><br />tricky lazy pig...');
}
function find_neighbours(){
var o=$('#ch-16'),
i=o.index(),
prev=(i > 0) ? ($('#ch-'+(arr[i-1]))) : false,
next=(i < 16) ? ($('#ch-'+(arr[i+1]))) : false,
upper=(i > 3) ? ($('#ch-'+(arr[i-4]))) : false,
lower=(i < 12) ? ($('#ch-'+(arr[i+4]))) : false;
if(prev && (i % 4 != 0)){prev.addClass('movable');}
if(next && jQuery.inArray(i,[3,7,11,15])==-1){next.addClass('movable');}
if(upper){upper.addClass('movable');}
if(lower){lower.addClass('movable');}
$('.movable').click(function(){
var this_i=$(this).index(),
this_num=Number($(this).text()),
dummy_i=$('#ch-16').index(),
dummy_num=Number($('#ch-16').text());
arr[this_i]=dummy_num;
arr[dummy_i]=this_num;
goround();
moves++;
$('#score').html('You have made <b>'+moves+'</b> move'+(moves==1?'':'s')+' <span>so far...</span>');
if(xyz.toString()==arr.toString()){
$('#score span').replaceWith('<br /><br />and ');
$('#score').append('<span style="text-align:center;color:Crimson;font-size:24px;">You WIN!</span>');
}
else{
try{$('#res').remove();}
catch(e){}
}
});
}
$(document).ready(function(){
$('body').append('<div id="score"></div>');
$('#shufflebutton').after('<button id="slv">Solve</button>');
$('button').css({
border:'none',
backgroundColor:'transparent',
cursor:'pointer',
fontWeight:'bold',
fontSize:'16px',
marginLeft:'15px',
marginRight:'15px'
}).on('focus',function(){$(this).blur();});
$('#slv').click(solve);
$('#shufflebutton').click(function(){
moves=0;
$('#score').empty();
arr=shuffle(arr);
goround();
});
$('#shufflebutton').click();
/* Хрень */
setTimeout(function(){
$('p').eq(0).fadeOut(1200,function(){
$('p').eq(2).fadeOut(1200,function(){
$('#w3c').css({textAlign:'center'});
$('h1').css({textAlign:'center'}).animate({fontSize:'52px'},1200);
});
});
},10000);
});
</script>
</head>
<body>
<h1>Fifteen Puzzle</h1>
<p>
The goal of the fifteen puzzle is to un-jumble its fifteen squares
by repeatedly making moves that slide squares into the empty space.
How quickly can you solve it?
</p>
<div id="puzzlearea">
<div>1</div><div>2</div><div>3</div><div>4</div>
<div>5</div><div>6</div><div>7</div><div>8</div>
<div>9</div><div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div>
</div>
<p id="controls">
<button id="shufflebutton">Shuffle</button>
</p>
<p>
American puzzle author and mathematician Sam Loyd is often falsely
credited with creating the puzzle; indeed, Loyd claimed from 1891
until his death in 1911 that he invented it.
The puzzle was actually created around 1874 by Noyes Palmer Chapman,
a postmaster in Canastota, New York.
</p>
</body>
</html>