JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="myController">
    
    <div>Parent v1: {{v1}}</div>
    <div>Parent v2: {{v2}}</div>

    <!-- Pass a number and function from current scope to directive scope via [ng-attr-] -->
    <my-directive ng-attr-object="v1"
                  ng-attr-func="increment_v2"/>
</div>

CSS

span.colored {
    background-color: #ADC;
    padding: 5px 10px;
}

button {
    padding: 5px 10px;
    margin: 10px;
    border-radius: 5px;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    
    // These belong to myController, 
    // they have nothing to do with myDirective
    $scope.v1 = 0;
    $scope.v2 = 100.0;
    
    $scope.increment_v2 = function() {
        $scope.v2++;
        return $scope.v2;
    };
    // end init
});

app.directive("myDirective", function () {
    return {
        restrict: 'E',
        scope: {           
            // =
            child_equals_v1: '=object',
            
            // @
            child_at_v1: '@object',
            
            // & 
            // These will actually be functions that return the objects you passed in.
            // I like to name them with get...() to clearly illustrate this
            get_child_ampersand_v1: '&object',
            get_parent_func: '&func'
            
            // All these can also be accessed like this:
            //    name: '=' 
            // ...if you use the exact same 'name' as the ng-attr-'name'
            // Not doing so gives the opportunity to rename them as you 
            // see fit within the directive
        },
        
        link: function (scope) {
            // Get the actual objects we passed in by calling their accessor functions
            scope.child_ampersand_v1 = scope.get_child_ampersand_v1();
            scope.parent_func = scope.get_parent_func();
        
            scope.typeOfAt = typeof(scope.child_at_v1);
            
            // Create an arbitrary function that manipulates the LOCAL copy of v1
        	scope.increment_ampersand_v1 = function() {
        		scope.child_ampersand_v1++;
		    };
            scope.increment_equals_v1 = function() {
        		scope.child_equals_v1++;
		    };
        },
        template:
        	'<button class="colored" ng-click="increment_ampersand_v1()">& Increment local v1: {{child_ampersand_v1}}</button>'
        	+ '</br>' +
        	'<button ng-click="parent_func()">&  Call parent...