jweaver/app.js

## app.js
var myApp = angular.module('myApp', []);
myApp.directive('repository', function() {
    return {
        restrict: 'C',
        scope: {
            owner: '@repoOwner',
            name: '@repoName'
        },
        link: function(scope, element, attrs, controller) {
            //attach to 'repoOwner' due to ordering of attributes in element.  TODO: Is there a better way?
            attrs.$observe('repoOwner', function(value) {
                element.repo({
                    user: scope.owner,
                    name: scope.name
                });
            });
        }
    };
})

//Replace 'jweaver' with the github username you wish to use
function GithubController($scope, $http) {
    $http.get('https://api.github.com/users/jweaver/repos').success(function(data) {
        $scope.repos = data;
    });
}

## index.html
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">

<head>
    <!-- Note library names.  Angular is Angular.js (http://www.angularjs.org/).  Repo is Repo.js (http://darcyclarke.me/dev/repojs/) -->
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="lib/repo.min.js"></script>
    <script type="text/javascript" src="lib/angular-1.0.1.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>

<body>
    <div ng-app="myApp" ng:controller="GithubController">
         <div ng-repeat="repo in repos" class="repository"
              id="{{repo.name}}" repo-name="{{repo.name}}" repo-owner="{{repo.owner.login}}">
         </div>
    </div>
</body>

</html>

## styles.css
.strong   { background-color: #060; border-color: #0F0;}
.medium   { background-color: #C60; border-color: #FC0;}
.weak     { background-color: #900; border-color: #F00;}
.strength { padding: 1px 10px; border: 2px solid; color: #FFF;}
	var myApp = angular.module('myApp', []);
	myApp.directive('repository', function() {
	return {
	restrict: 'C',
	scope: {
	owner: '@repoOwner',
	name: '@repoName'
	},
	link: function(scope, element, attrs, controller) {
	//attach to 'repoOwner' due to ordering of attributes in element. TODO: Is there a better way?
	attrs.$observe('repoOwner', function(value) {
	element.repo({
	user: scope.owner,
	name: scope.name
	});
	});
	}
	};
	})

	//Replace 'jweaver' with the github username you wish to use
	function GithubController($scope, $http) {
	$http.get('https://api.github.com/users/jweaver/repos').success(function(data) {
	$scope.repos = data;
	});
	}
	<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">

	<head>
	<!-- Note library names. Angular is Angular.js (http://www.angularjs.org/). Repo is Repo.js (http://darcyclarke.me/dev/repojs/) -->
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="lib/repo.min.js"></script>
	<script type="text/javascript" src="lib/angular-1.0.1.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	</head>

	<body>
	<div ng-app="myApp" ng:controller="GithubController">
	<div ng-repeat="repo in repos" class="repository"
	id="{{repo.name}}" repo-name="{{repo.name}}" repo-owner="{{repo.owner.login}}">
	</div>
	</div>
	</body>

	</html>
	.strong { background-color: #060; border-color: #0F0;}
	.medium { background-color: #C60; border-color: #FC0;}
	.weak { background-color: #900; border-color: #F00;}
	.strength { padding: 1px 10px; border: 2px solid; color: #FFF;}