Ui-sref show double templates


#1

I have two templates in which the first calls the second, and a controller to manage both.
When i call ui-sref function from the first template, i see the previous template with overlapped the second, or no components of the second.
Here’s the code:

  FATHER.HTML
 <div class="list card" style="margin-top:50px" ng-repeat="singular in multiples">
<a ui-sref="son" ng-click="show(singular.id)">
 ...
 </div>

 SON.HTML
<div class="list card" style="margin-top:50px">
<p>
        {{singular.informations}}
        <div ng-if="singular.road!=''">
            <p>{{singular.town}}</p>
            <p>{{singular.address}}</p>
            <p>{{singular.username}}</p>
        </div>
    </p>
</div>

 MANAGE.JS
  $scope.show = function(id){
        $rootScope.id=id;
        $scope.sonInfo($rootScope.id);
        }

 $scope.sonInfo = function(id){
          Restangular.all('childrens').customGET(id).then(function (data) {
                console.log(data.res.obj);
                $scope.son = data.res.obj;
            });
         }

What should i do? It exists a refresher of pages that show correctly the second template? other ideas? If you mean, put the code into a codepen, i’m unfamiliar with that.