I am completely baffled by this situation.
Here is the current status:
https://i.sstatic.net/PJdb6.png
Upon reaching this page, the following appears in the console:
https://i.sstatic.net/aIJqd.png
When I click on "lorem2", which has an ng-click function meant to change the displayed object on the large square on the left. Strangely, it logs this in the console:
https://i.sstatic.net/3Njp1.png
It does indeed change the value of the variable, but then reverts back to the original object.
Oddly enough, if I click again, the following occurs:
https://i.sstatic.net/psCdp.png
Now, the change remains and "lorem2" is displayed in the big square. Any thoughts on what might be causing this behavior?
This code block is within the controller:
$scope.singleArticle = $scope.articlesList[0];
console.log($scope.singleArticle);
$scope.changeArticle = function(article){
$scope.singleArticle = article;
console.log($scope.singleArticle);
};
This is the function that is triggered on ng-click to update the value.
Below is some relevant HTML code:
<div class="col-lg-7">
<div class="panel panel-default">
<div class="panel-body">
<p>{{singleArticle.title}}</p>
{{singleArticle.content}}
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default" ng-repeat="article in articlesList | limitTo: (1 - articlesList.length) | limitTo: 3">
<div class="panel-body">
<a ui-sref="articles_route({ article: article.title})"
ng-click="changeArticle(article)">{{article.title}}
</a> {{article.content | limitTo: 100}}.
</div>
</div>
</div>
Thank you for your attention :)