Modification dynamique du contenu avec la directive AngularJS, l'usine et ng-repeat

Je travaille sur un widget qui changera dynamiquement son contenu chaque fois que je clique sur un bouton correspondant. J'ai passé une tonne d'heures à comprendre cela mais je ne pouvais pas.

J'ai stocké toutes les données fournies avec l'usine angulaire. Ce que j'aimerais réaliser, c'est que chaque fois que je clique sur un bouton, il déclenche un événement pour saisir une autre propriété, qui est également un autre ensemble de données, dans les données d'usine. Et ceux-ci seront affichés dans la zone de contenu avec ng-repeat.

Je vais joindre mon exemple de code ci-dessous pour votre information. Veuillez laisser tout conseil ou tout concept qui m'aidera à comprendre et à mieux comprendre cela. Merci pour votre temps!

//index.html
<div directive>
 <div class='buttons'>
   <p>Button A</p>
   <p>Button B</p>
   <p>Button C</p>
 </div>
 <div>
  <a ng-repeat='a in data'>{{a.title}} {{a.author}}</a>
 </div>
</div>
//app.js
app.directive('directive', ['factoryData', function(factoryData) {
 return {
  restrict: 'A',
  link: function ($scope, ele, attrs) {
   $scope.data = factoryData.firstProp;
   var btns = $(ele).find('p');
   p.on('click', function () {
    $scope.data = factoryData.secondProp;
    ...
    ...
   });
  },
 };
}]);