When I use $http.get() to retrieve my model $scope.workoutData, the object appears fine in the console.log(data) output. However, my view does not load as if it has received the model. Once the model is updated, I also need to trigger the owlCarousel() function which adds elements and classes to my HTML behind the scenes. I have attempted using $scope.$apply(); in the commented out sections.
app.controller('calendarCtrl', ['$scope', '$http', function($scope, $http){
//Hard coding like this works just fine when I remove the $http.get() request
//$scope.workoutData = {"1969-12-31":[["14:50:15","1","8","135",null]....
angular.element(document).ready(function () {
$http.get("php/getWorkoutData.php")
.success(function(data) {
console.log(data); // show that I have a proper object
$scope.workoutData = data;
});
//$scope.$apply();
var owl = $("#owl-demo");
// This needs to run after the model updates
owl.owlCarousel({
itemsCustom : [
[0, 2],
[500, 3],
[1000, 4],
[1600, 5]
],
navigation : true
});
//$scope.$apply();
});
}]);
Below is my HTML:
<div id="calendar" ng-controller="calendarCtrl">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" ng-repeat="(date, figures) in workoutData">
<div class="scollHeader">
{{date}}
</div>
<div class="scrollBody">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Exercise</th>
<th>Reps</th>
<th>Weight</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="set in figures">
<td ng-repeat="dataPoint in set track by $index">{{dataPoint}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
However, when I hard code owlCalousel(), it changes the view to look like this:
https://i.sstatic.net/m1o1v.png
I am looking for ways to ensure my View updates properly. Any suggestions?