Angular.js sample directive

app.js

angular.module('myApp')
    .directive('orderRequirement', orderRequirement);

/* @ngInject */
function orderRequirement() {
    var directive = {
        restrict: 'EA', // Restrict to [E]lement or [A]ttribute
        templateUrl: 'partials/requirements-order-requirement.html', // HTML template
        scope: { // Isolated scope, defining the tag attributes that binds to scope variables
            orders: '=',
            filter: '=',
        },
        link: linkFn,
    };

    function linkFn(scope, element, attrs) {
        // Additional logic, $http/$resource requests, etc.
    }

    return directive;
}

index.html

<tr ng-repeat="(c, v) in r.col"> <!-- r.col is an object -->
    <td>
        <!-- order-requirement is the custom directive -->
        <order-requirement orders="v.siz['P'] || v.siz['36'] || {}" filter="state.search"></order-requirement> <!-- v.siz is another object -->
    </td>
</tr>

requirements-order-requirement.html

<span>
    <strong>{{orders.qty}}</strong> <!-- orders is an attribute on custom directive and a variable of scope -->
    <br>
</span>
<span ng-repeat="c in orders.cut">
    <span ng-bind-html="c | highlight:filter"></span> <!-- highlight is a custom filter, just ignore -->
    <br>
</span>