AngularJS directive controller vs link

var app = angular.module('myApp', []);

// 4) Exercise : improve the code organization using the Design 
//              Patterns that Angular provides.

app.controller('MainCtrl', ['$http', '$scope', function($http, $scope) {
  $scope.name = 'First ';
  
  // Spotify API : https://developer.spotify.com/web-api/search-item/
  $http.get('https://api.spotify.com/v1/search?q=artic&type=artist').success(function(data){
    $scope.artists = data.artists.items;
    $scope.next = data.artists.next;
  });
  
}]);

app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'name': '='
    },
    templateUrl: 'searchTemplate.html',
    link: function(scope, el, attr) {
      scope.name = scope.name + "Second " + "Third ";
    }
  }
})

app.directive('breadcrumb', function() {
  return {
    restrict: 'E',
    templateUrl: 'breadcrumbTemplate.html'
    // 2) DONE
    // add breadcrumb HTML saved in the partial 'breadcrumbTemplate'
    // We want to see the Breadcrumb only on Desktop view
  }
})

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS </title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" data-semver="1.3.11"></script>
    <script src="app.js"></script>
  </head>

<!-- 
  Documentation:
    AngularJS: https://docs.angularjs.org/api
    Bootstrap: http://getbootstrap.com/css/ 
-->

  <body ng-controller="MainCtrl">
    
    <!-- 1) DONE Implement here: breadcrumb only for Desktop view -->
    <breadcrumb></breadcrumb>
    
    <div class="container">
      <example-directive name="name"></example-directive>
      
      <div class="row">
        <!-- 2) DONE Artists should be sorted by 'Popularity' using a Filter -->
        <!-- 5) DONE Improve UI using a bootstrap list-group component -->
        <div class="list-group" ng-repeat="artist in artists | orderBy : '-popularity'">
          <a href="#" class="list-group-item">
            {{artist.name}} 
            <span class="badge">{{artist.popularity}}</span>
        </a>
        </div>
      </div>
      
      <div class="row">
        <a href="{{ next }}">Next</a>
      </div>
    </div>
    
  </body>

</html>

/* Put your css in here */

@media only screen and (max-width : 400px) {
/* Styles */
  breadcrumb {
    display: none;
  }
}

.list-group {
  margin: 10px 20px;
}

.container .example-directive {
  margin-left: 20px;
}

#Basic DEMO about Directives and Filters

This App aims to be a basic excercise for Angular's devs. 
The numbers included are just for our control.

(instructions are located in the code)

*angularJS 1.3*

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<h1>Hello {{name}}!</h1>
<div class="row example-directive">
  <form name="searchMovie">
  <!-- 3) Implement here: error messages using Angular 1.3 -->
    <label for="search">Search a movie:</label>
    <input id="search" name="search" type="text" placeholder="Search" ng-minlength="5">
    <div ng-messages="searchMovie.search.$error" style="color:red">
      <div ng-message="maxlength">Min 5 symbols</div>
    </div>
  </form>
</div>