Problemas em utilizar modal ou canvas bootstrap com ng-repeat

Estou usando um template onde existe offcanvas sobre um chat. A minha ideia é listar uma lista de usuário usando ng-repeat e em cada usuário ter um link que redireciona ao chat onde está as mensagens Porém, quando eu utilizo o ng-repeat eu não consigo ser redirecionado, porém quando eu uso de modo estático o link funciona.

segue o exemplo com o ng-repeat

  <li class="tile" ng-repeat="value in alunos">
                    <a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-target="#offcanvas-chat" data-backdrop="false">
                        <div class="tile-icon">
                            <img src="data:image/jpeg;base64,{{value.foto_perfil}}" class="img-responsive" alt="Responsive image">
                        </div>
                        <div class="tile-text">
                            {{value.nome}}
                            <small></small>
                        </div>
                    </a>
                </li>

O modo estático funciona, ou seja sem o ng-repeat

 <li class="tile">
                    <a class="tile-content ink-reaction" href="#offcanvas-chat" data-toggle="offcanvas" data-target="#offcanvas-chat" data-backdrop="false">
                        <div class="tile-icon">
                            <img src="data:image/jpeg;base64" class="img-responsive" alt="Responsive image">
                        </div>
                        <div class="tile-text">
                            teste
                            <small></small>
                        </div>
                    </a>
                </li>