Different ng-include's on the same page: how to send different variables to each?

Question

I\'ve got a page in my AngularJS app in which I would like to include the same html partial, but with different variables. If I do this in my main html:

Answer 1

There is a way to create a universal reusable directive.

Here is what a colleague of mine had come up with (inspired by Knockout.js).

Directive:

(function () {
    'use strict';

    angular
        .module('directives')
        .directive('ngWith', ngWith);

    function ngWith() {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                model: '=',
                template: '@'
            },
            template: '
',
        };
    }
})();

Usage: