JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="appCtrl">
        <ul id="list">
            <li ng-repeat="p in phones" id="{{p.name}}">{{p.name}}</li>
        </ul>
    </div>
    <div id="result"></div>
</div>

JavaScript

angular.module('myApp', []);

function appCtrl($scope, $http, $timeout) {
    $http({
        url: '/echo/json/',
        method:'POST',
        data: "json="+JSON.stringify([{name:"p1"},{name:"p2"},{name:"p3"}])
    })
    .success(function (data) {
        $scope.phones = data;
        
        //not working
        log("<br/>Check straight after load data");
        check($scope.phones);
        
        //working solution, don't like the timeout hack
        $timeout(function () {
            log("<br/>After 0ms timeout");
            check($scope.phones);
        }, 0);
        
        $timeout(function () {
            log("<br/>After 500ms timeout");
            check($scope.phones);
        }, 500);
    });
}
function check(phones){
    var foundElement = 0;
    angular.forEach(phones, function (p) {
        if(document.getElementById(p.name))
            foundElement++;
    });
    
    var msg = 'Found '+foundElement+' elements : ';
    if(foundElement>=phones.length)
       msg += 'Working!';
    else
        msg += 'not working :(';
    log(msg);
    
}
function log(msg){
    var result = document.getElementById("result");
    result.innerHTML += msg+'<br/>';
}