steph steph - 2 years ago 67
AngularJS Question

Array Not Propagating to View

I'm very new to Angularjs and Firebase and have been stuck on this for quite some time. I'm trying to use

to iterate over an array of procedures I set in my controller. I can print
in my controller but not in
. Any idea where I'm going wrong?


<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<meta charset="utf-8">
<!-- Angular JS -->
<script src="lib/angular/angular.min.js"></script>
<!-- Firebase -->
<script src=""></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
<div class="container-fluid" id="logo">
<div class="container" ng-controller="MainCtrl">
<div class="col-sm-7 col-md-6 col-md-offset-1" id="message">
<label id="input-label">Insurance Company</label>
<input ng-model="insurQuery" class="form-control insurInput" id="input-box" placeholder="Patient Insurance Company" autofocus>
<div ng-if="showProcedures()">
<h3>Procedures Covered by <span id="proc-span">{{}}</span></h3>
<ul class="list-group">
<li class="list-group-item" ng-repeat="proc in procedures">
<a>{{ }}</a>
<div class="col-sm-4 col-md-4 col-md-offset-1" id="message2">
<ul class="list-group">
<li class="list-group-item ng-class: {'active':isSelectedInsur(company)}" ng-repeat="company in insuranceCompanies | filter: insurQuery | orderBy: 'name'">
<a href="#" ng-click="setSelectedInsur(company)">{{ }}</a>


var myApp = angular.module('myApp', ['ui.bootstrap', 'firebase']);

myApp.controller("MainCtrl", function($scope, $firebaseArray) {
var ref = new Firebase("");
// download the data into a local object
$scope.insuranceCompanies = $firebaseArray(ref);

$scope.selectedInsur = null;
$scope.isSelected = false;
$scope.procedures = [];

function getProcedures() {
var companiesBaseUrl = ""
var proceduresBaseRef = new Firebase("");
var companyUrl = companiesBaseUrl + $scope.selectedInsur.$id + "/procedures/";
var proceduresUrl = ""
var companyProceduresRef = new Firebase(companyUrl);

companyProceduresRef.on("child_added", function(snap) {
proceduresBaseRef.child(snap.key()).once("value", function(data) {
if (data.val()) {
console.log("Name: ", data.val().name);
console.log("scope procedures: ", $scope.procedures);

function setSelectedInsur(company) {
if ($scope.selectedInsur == company) {
$scope.selectedInsur = null;
$scope.isSelected = null;
} else {
$scope.selectedInsur = company;
$scope.isSelected = true;
console.log("scope procedures: ", $scope.procedures);

function isSelectedInsur(company) {
return $scope.selectedInsur !== null && == $;

function showProcedures() {
if ($scope.isSelected == true) {
return true;
} else {
return false;

$scope.setSelectedInsur = setSelectedInsur;
$scope.isSelectedInsur = isSelectedInsur;
$scope.showProcedures = showProcedures;
// $scope.procedures = $scope.procedures;


Answer Source

I'm also pretty new to Angular as well and one of the most deep and hard topics in angular (imo) is how angular binding works under the hood.

In your case calling $scope.$apply() works but keep in mind that this is not the best solution and you should not start calling it whenever you have a binding problem.

I really encourage you to take some time reading some articles about what angular binding really is. You can start here and here. After this get back to your code to understand what you are doing wrong. :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download