JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="MainController">
<h1>Hello Plunker!</h1>
<strong>Everyone</strong>
<div ng-repeat="name in names">
{{name}}
</div>
<strong>These guys haven't paid their bills (Non Promise)</strong>
<div ng-repeat="name in names">
<div ng-show="NotPaidBillsNonPromise(name)">
{{name}}
</div>
</div>
<strong>These guys haven't paid their bills (Using http Promise)</strong>
<div ng-repeat="name in billsNotPaid">
{{name}}
</div>
</div>
</div>
JavaScript
function MainController($scope, $http) {
$scope.names = [
"James",
"Tim",
"Alex",
"Sam",
"Kim"
];
$scope.billsNotPaid = []; // start as empty
$scope.NotPaidBillsNonPromise = function (name) {
if (name == "Tim" || name == "Sam") return true;
};
$scope.NotPaidBills = function (name) {
return $http.get("http://echo.jsontest.com/name/" + name)
.then(function (r) {
return (r.data.name === "Tim" || r.data.name === "Sam")
});
};
// start the check for each name
$scope.names.forEach(function(name){
return $scope.NotPaidBills(name).then(function(notPaid){
console.log(name, notPaid);
if(notPaid) $scope.billsNotPaid.push(name);
});
});
}