JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<!doctype html>
<html ng-app="myApp">
<body ng-controller='MainCtrl'>
    <a ng-href="#" data-test-scope name="test">Console should say 'test' but gives undefined</a>
</body>
</html>

JavaScript

angular.module('components', [])
    .directive('testScope', function() {
        return {
            restrict: 'CA',
            scope: {
                name: "@",
            },
            link: function(scope, element, attrs) {
                console.log(scope.name);
            }
        };
    })

angular.module('myApp', ['components'])
.controller('MainCtrl',function($scope) {
    $scope.test='someValue'
});