displays card model on click

Before, when a card name link was clicked, a list of all the card data would be displayed at the top. However, now that there is a card model directive, upon clicking the card name link, a card model directive is loaded which displays all the information about the card in card form.

src/deck_builder/controller.js

@@ -8,7 +8,7 @@ function DeckbuilderController(CardshifterServerAPI, $scope, $rootScope, $locati
     $scope.maxCards = 0;
     $scope.minCards = 0;
     $scope.currentDeck = {};
-    $scope.cardInfo = {};
+    $scope.cardInfo = null;
     $scope.currentDeckName = "untitled";
     $scope.savedDecks = [];
     $scope.doneLoading = false;
@@ -102,22 +102,14 @@ function DeckbuilderController(CardshifterServerAPI, $scope, $rootScope, $locati
     * available cards table has been clicked.
     *
     * Once this function is called, it loads $scope.cardInfo
-    * with the most important properties of the card. Then,
-    * the HTML will take care of not showing the card information
-    * that is "undefined", as not all cards have the same properties.
+    * with the card object associated with the link that was
+    * clicked and will simply stick it into a card directive
+    * which is displayed at the top of the screen.
     *
     * TODO: Dynamically load $scope.cardInfo with card properties. #60
     */
     $scope.showDetails = function(card) {
-        var props = card.properties;
-        $scope.cardInfo = {
-            name: props.name,
-            flavor: props.flavor,
-            type: props.creatureType,
-            health: props.HEALTH,
-            attack: props.ATTACK,
-            sickness: props.SICKNESS
-        };
+        $scope.cardInfo = card;
     };
 
     /**

src/deck_builder/template.html

@@ -31,9 +31,7 @@ <h2>{{getTotalSelected()}} / {{maxCards}}</h2>
              TODO: Add more fields of card information to be shown.
           -->
         <ul>
-            <li data-ng-repeat="(name, value) in cardInfo" data-ng-show="value">
-                <b>{{name}}</b>: {{value}}
-            </li>
+            <card card-info="cardInfo" ng-show="cardInfo"></card>
         </ul>
 
         <!-- LIST OF ALL CARDS - Displays one full row below for every card -->