How to setup and use an AngularJS service

I’m new to AngularJS and I am trying to use a service so I can pass data around between controllers.

I have followed the w3schools instructions (here) to setup a service, and it resulted in this:

app.service('hexafy', function() {
    this.myFunc = function(x) {
        return x.toString(16);

app.controller('almLoginCtrl', ['$scope', '$state', function ($scope, $state, hexafy) {

    /* This function handles the user tapping the "login" button. It will process their 
     * login details and allow proceed or show incorrect login details error as necessary.
    $scope.almLogin = function () {
        // Functionality needs to be added to test login data, collect and store the login data and the LWSSO

    $scope.hex = hexafy.myFunc(255);

And this is how I attempt to see its output:

<h3 class="login-title">{{hex}} ALM DETAILS</h3>

(this is surrounded by other irrelevant HTML)

This is the first service I’ve ever tried to create so I am just creating one that will allow me to test how it works. This code is put into the second view of a AngularJS/Cordova/Ionic hybrid app I’m building.
However, for some reason, when I run this code, this error appears in the console:

> TypeError: Cannot read property 'myFunc' of undefined...

(stack trace omitted for brevity)

According to W3schools, and the try-it-now playground on their site, I should see “ff” displayed next to “ALM DETAILS” on the rendered HTML page. Instead, this displays:


It displays “{{HEX}}” instead of the variable’s value.

Not sure if its relevant, but I build the app with a Gulp and am testing it in the chrome browser, developer mobile view.

So, what am I doing wrong when setting up the service? Why is the function output being returned as “undefined”? (or is it the function itself that is undefined?)

Source: AngularJS