Angular templateURL, Express routing can't see variable

Question

My days with MEAN stack are still fairly new, currently following tutorials on plural sight. However, i'm running into an issue regarding angular and express routing.

I created the following controller and directive in my js file:

angular.module('app',[]);
angular.module('app').controller('mainCrtl', function ($scope)
{
    $scope.user = {
        name: 'Luke Skywalker',
        address: {
            street: 'PO Box 123',
            city: 'Secret Rebel Base',
            planet: 'Yavin 4'
        },
        friends: [
            'Han',
            'Leia',
            'Chewbacca'
        ]
    }

});

angular.module('app').directive('userInfoCard', function()
{
    return{
        templateUrl: "/template/userInfoCard",
        restrict: "E",
        scope: true,
        replace: true
    };
});

In my other js file that i handle routing, i have:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/template/userInfoCard', function(req, res, next) {
    res.render('./template/userInfoCard');
});
module.exports = router;

The template, separate file in ./template/userInfoCard.html:

<div class="panel panel-primary">
    <div class="panel-heading">{{ user.name }} </div><br/> <br/>
    <div ng-show='!!user.address'>Address: {{ user.address }} </div> <br/> <br/>
    <div>Friends: 
        <div ng-repeat='friend in user.friends'> {{friend}}</div>
    </div>
</div>

Prior to using the templateURL and just setting the template to the actual html code, the binding between $scope.user and the html worked, but after i moved the template out and used "templateURL". The binding broke.

Would be great if anyone can help me out, and even to just point out that i'm doing something wrong in terms of best practices.

Thanks and Regards,

Kev