My angular application structure is pretty straightforward. Here is a snippet of the HTML:
<body ng-app>
<div class="content" ng-controller="LeaderboardCtrl">
<div class="row" ng-repeat="fb_ranking in fb_rankings">
<div class="rank cell">{{fb_ranking.rank}}</div>
<div class="name cell">{{fb_ranking.name}}</div>
<div class="score cell">{{fb_ranking.score}}</div>
</div>
</div>
</body>
And here is the accompanying JavaScript:
function change_data(){
some_data[0].rank = 99;
var sc = angular.element(document.getElementById('overlay')).scope;
sc.$apply(function(){
sc.fb_rankings = some_data;
});
}
var some_data = [
{rank: 1, name: 'Boink a doodledo', score: 3000},
{rank: 2, name: 'Someone else', score: 300},
{rank: 3, name: 'Donkey', score: 30},
{rank: 4, name: 'Booger landon', score: 20},
];
function LeaderboardCtrl($scope){
$scope.fb_rankings = some_data;
}
Initially, everything functions as expected upon loading. However, my aim is to update the model some_data programmatically, rather than in response to an event like a click. This is due to the fact that the data update is a result of intricate Flash and DOM interactions, ruling out the use of event-based directives like ng-click.
To achieve this, I have the change_data function which makes a property modification and then attempts to access the angular scope and use the $apply function. Unfortunately, when I execute change_data(), it fails with the following error message:
TypeError: Object function (a,d){v... and so on.
I'm perplexed by what might be causing this issue and what the error signifies. I have created a jsfiddle with the code mentioned above: http://jsfiddle.net/w2Ahr/1/
Any insights or guidance would be greatly appreciated.