Pulling in Resources Dynamically with Angular and ngHref

<!DOCTYPE html>

<!-- define our app and controller on html -->
<html ng-app="linkApp" ng-controller="mainController">

<head>

    <!-- pull in css based on angular -->
    <link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/{{ css }}/bootstrap.min.css">
    <link rel="stylesheet" ng-href="layout-{{ layout }}.css">
    <style>
        body {
            padding-top: 50px;
        }
    </style>

    <!-- bring in JS and angular -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body class="container">

    <!-- section to select styles -->
    <div class="well">
        <form>
            <div class="form-group">
                <label>Theme</label>
                <select class="form-control" ng-model="css" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">
                </select>
            </div>
            <div class="form-group">
                <label>Layout</label>
                <select class="form-control" ng-model="layout" ng-options="layout.url as layout.name for layout in layouts"></select>
            </div>
        </form>
    </div>

    <hr>

    <!-- our content -->
    <div class="picture-thing">
        <div class="picture-thing-img">
            <img src="http://scotch.io/wp-content/uploads/2014/10/picture-picture.jpg">
        </div>
        <div class="picture-thing-content">
            <h2>Bananas</h2>
            <p>This demo is just that.</p>
        </div>
    </div>
    

</body>

</html>

angular.module('linkApp', [])

.controller('mainController', function($scope) {
  
  $scope.css = 'cosmo';
   
  $scope.bootstraps = [
    { name: 'Basic', url: 'cosmo' },
    { name: 'Slate', url: 'slate' },
    { name: 'Sandstone', url: 'sandstone' }
  ];
  
  $scope.layout = 'normal';
  
  $scope.layouts = [
    { name: 'Boring', url: 'normal' },
    { name: 'Circles', url: 'circle' },
    { name: 'In Your Face', url: 'large' }
  ];

});

.picture-thing-img img { width:200px; }

.picture-thing 		    { display:block; width:400px; height:400px; overflow:hidden; margin:0 auto; border-radius:50%; }
.picture-thing-img img 	{ max-width:200%; }

.picture-thing-content  { text-align:center; color:#FFF; transition:0.3s ease all; opacity:0; }
.picture-thing-content h2     { font-size:40px; }
.picture-thing-content p      { font-size:25px; }

.picture-thing:hover .picture-thing-content { transform:translateY(-375%); opacity:1; }

.picture-thing {
    position: relative;
}
.picture-thing-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.picture-thing-img img {
    max-width: 100%;
}
.picture-thing-content {
    position: absolute;
    color: #FFF;
    top: 100px;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
}
.picture-thing-content h2 {
    font-size: 70px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.picture-thing-content p {
    font-size: 30px;
}