In index.html:

<FiProduct product="product"></FiProduct>

In directives/FiProduct.js:

angular.module('fiAngulartjeApp')
  .directive('FiProduct', function () {
    return {
      templateUrl: 'views/directives/fiproduct.html',
      restrict: 'E',
      scope: {
      	product: '=product'
      }
    };
  });

This will in fact not work, eventhough the capitalization is exactly the same.

Angular has a naming convention that states that will split your directives capitalization with a hyphen. e.g.: .directive('FiProduct', ...) will map to <fi-product>

Our convention will be not to use the camel casing so we don't need to adhere to Angulars convention. So, always use lowercase directive names. e.g.: .directive('fiproduct', ...) will map to <fiproduct>