How to Get value of $scope.foo in a controller from a html file

Question

I have a custom html tag :

<custom-scan id="fingscan" client="12345678" tries="3"></custom-scan>

However client should not be a constant value, but a variable from a search result on a previous part of the workflow.

The controller has a value called $scope.userInfo.cu that holds the value I need to set.

hence :

<custom-scan id="fingscan" client="" tries="3"></custom-scan>
    <script>
        const fingscan = document.querySelector('custom-scan');
        fingscan.setAttribute("client", $scope.userInfo.cu);
        console.log(fingscan.getAttribute("client"));
    </script>

throws me a ReferenceError: $scope is not defined. , and changing the variable to just userInfo.cu throws me the same, except saying userInfo is not defined.

What am I doing wrong here? my guess is the js controller and the script in the HTML file are not visible to each other. Please update me on how do I fix this?

Answer 1

you need to change it within angularsjs scope

<script>
    var ngApp = angular.module('myNgApp', []);

    ngApp.controller('myController', function ($scope) {
        const fingscan = document.querySelector('custom-scan');
        fingscan.setAttribute("client", $scope.userInfo.cu);
        console.log(fingscan.getAttribute("client"));        
    });
</script>

you may need to call $scope.apply() as well