ngModel Cheatsheet. How to interact with ngModel via JavaScript in your own Angular components

require-ng-model.js

var app = angular.module('example', []);

app.component('foo', {
    require: {
        theModel: '^ngModel'
    },
    template: '[...]',
    controller: FooCtrl,
    bindings: {
        options: '<'
    }
});

function FooCtrl() {
    //From here you can access the required directives and the bindigns directly on the controller's scope
    this.theModel !== undefined; //This is ngModel that was required
    this.options !== undefined; //This is the binded variable from bindings
}

useful-ngmodel-properties.js

var app = angular.module('example', []);

app.component('foo', {
    require: {
        ngModel: '^ngModel'
    },
    template: '[...]',
    controller: FooCtrl,
    bindings: {}
});

function FooCtrl() {
    var $ctrl = this;
    var value;

    $ctrl.$onInit = function () {
        //Get the current ngModel value
        value = $ctrl.ngModel.$modelValue;
        
        //Run this function each time the ngModel value was changed **externally**
        $ctrl.ngModel.$render = function () {
            value = $ctrl.ngModel.$modelValue;
        };
    };
    
    $ctrl.setValue(val) {
        value = val;
        
        //Set the ngModel value
        $ctrl.ngModel.$setViewValue(event.value.newValue);
    }
}