The difference between @, =, and & in AngularJS directives

foo-directive-partial.html

<div class="foo">
  <ul>
    <li data-ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

foo-directive.js

define([
  'config',
  'directive/snowball-directive'
], function (cfg, DRCT) {
  DRCT('foo', [
    '$rootScope'
  ], function ($rootScope) {
    return {
      templateUrl: cfg.path.partial + 'directive/foo-directive-partial.html',
      restrict: 'A',
      replace: true,
      scope: {
        items: '=',
        vari: '@',
        callback: '&'
      },
      link: function ($scope, $element, $attrs) {
        $scope.$watch('vari', function () {
          if ($scope.vari === 'bar') {
            $scope.items.pop();

            $scope.callback({
              foo: $scope.vari
            });
          }
        });
      }
    };
  });
});

foo-directive.spec.js

define([
  'config',
  'angular',
  'text!partial/directive/foo-directive-partial.html',
  'directive/foo-directive'
], function (cfg, A, partial) {
  describe('Foo directive', function () {
    var html = '<div data-foo data-items="dataItems" data-vari="{{foo}}" data-callback="callback(foo)"></div>',
        $httpBackend,
        $scope,
        createDirective,
        el;

    beforeEach(module(cfg.ngApp));
    beforeEach(inject(function ($injector) {
      var $compile = $injector.get('$compile'),
          $rootScope = $injector.get('$rootScope'),
          compiled;

      $httpBackend = $injector.get('$httpBackend');
      $scope = $rootScope.$new();
      el = A.element(html);
      compiled = $compile(el);

      createDirective = function () {
        var directive = compiled($scope);
        $scope.$apply();

        return directive;
      };
    }));

    afterEach(function () {
      $httpBackend.verifyNoOutstandingExpectation();
      $httpBackend.verifyNoOutstandingRequest();
    });

    it('should load', function () {
      var data = [1, 2, 3, 4],
          foo = 'foo',
          callback = jasmine.createSpy('callback');

      $httpBackend.expectGET(cfg.path.partial + 'directive/foo-directive-partial.html')
        .respond(201, partial);

      $scope.dataItems = data;
      $scope.foo = foo;
      $scope.callback = callback;

      createDirective();
      $httpBackend.flush();

      expect(el.find('li').length).toBe(data.length);

      $scope.foo = 'bar';
      $scope.$apply();

      expect($scope.dataItems.length).toBe(3);
      expect($scope.callback).toHaveBeenCalledWith($scope.foo);
    });
  });
});