Scope doesn't refresh - angularjs

Question

i have a problem with an http.get.
Index.html
<div ng-repeat="element in elements">
<p>{{element.elementText}}</p>
</div>
app.js
I have two controllers. First one initialize $scope.elements with a json and works:
$http.get('someUrl')
.success(function (response) {
$scope.elements = response;
})
Seconde one update $scope.elements with a another json when a scope function is called by ng-click:
$scope.updateScope = function () {
$http.get('someOtherUrl')
.then(function (response) {
$scope.elements = response.data;
});
But when i call updateScope nothing appens. I try use .success but nothing. I try using $scope.$apply after assign response to $scope.elements but it generates an error (Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.11/$rootScope/inprog?p0=%24digest).
UPDATE -
If I reload page ng-repeat on scope element works correctly.
So $scope.elements contains right values but ng-repeat doesn't update itself.
Sorry for my english...
Could you help me please?

Answer 1

.then(function (response) { and .success(function (response) { gets different objects in their callbacks. In the first case you get the response's data directly, in second it will be wrapped in an object (that has also other properties - like status, config, statusText, and so on).
If you use .then your response's body will be in sth.data, not in sth. So in your case:
$scope.updateScope = function () {
$http.get('someOtherUrl').then(function (response) {
$scope.elements = response.data;
});

Answer 2

You can use angular.merge
angular.merge(object1, object2)

Answer 3

To share data you want to use a service, not root scope. Consider an example like this:
HTML
<div ng-app="app">
<div ng-controller="controller1 as vm">
<input type="text" ng-model="vm.dataService.data" />{{vm.dataService.data}}</div>
<div ng-controller="controller2 as vm">
<input type="text" ng-model="vm.dataService.data" />{{vm.dataService.data}}</div>
</div>
JS
var app = angular.module('app', []);
app.factory('DataService', function () {
var data;
return {
data: 'Hello, World!'
};
});
app.controller('controller1', function (DataService) {
var vm = this;
vm.dataService = DataService;
});
app.controller('controller2', function (DataService) {
var vm = this;
vm.dataService = DataService;
});
Here is a jsFiddle that runs that code.

Answer 4

you can try following code.(you need to include $timeout)
$scope.updateScope = function () {
$http.get('someOtherUrl')
.then(function (response) {
$scope.elements = response;
$timeout(function(){
$scope.$apply();
});
});