Integrating simple utility functions into angular app
<p>I'm integrating a simple utility function into an angular app. How do I get the variable <code>utc</code> to show up on the page in my angular app? It's not showing up yet :( Here's the steps I took. Basically I guess I needed to refactor the following snippet into a service.</p>

<pre><code>var offset = - new Date().getTimezoneOffset();
var utc = ((offset &gt; 0 ? '+' : '') + offset / 60);
document.write(utc);
</code></pre>

<p>Here's my service... not sure if this is correct as it's not working yet.</p>

<pre><code>(function () {
    'use strict';
    angular.module('weatherapp.weatherlist')
        .factory('utcFactory', function utcFactory() {
        return {
            myUTC: function() {
                var offset = - new Date().getTimezoneOffset();
                var utc = ((offset &gt; 0 ? '+' : '') + offset / 60);
                return utc;
            }
        };
    }
})();
</code></pre>

<p>Here's the controller:</p>

<pre><code>(function () {
    'use strict';
    angular.module('weatherapp.weatherlist', ['weatherapp.locations'])
        .controller('WeatherlistController', ['$scope', 'LocationService', 'WEATHER_API_URL', 'WEATHER_API_IMAGE_URL', 'WEATHER_API_ID', 'WeatherListFactory', 'utcFactory',WeatherListCtrl]);

    function WeatherListCtrl($scope, LocationService, WEATHER_API_URL, WEATHER_API_ID, WEATHER_API_IMAGE_URL, WeatherListFactory, utcFactory) {
        $scope.$on('$ionicView.enter', function(){
            $scope.locationData= [];
            //TODO Show empty String when no locations are set.
            var locations = LocationService.getLocations();
            $scope.noLocation=locations.length&lt;1;
            if (!$scope.noLocation){
                locations.forEach(function (location) {
                    WeatherListFactory.getWeatherData(WEATHER_API_URL + 'q=' + location + '&amp;appid=' + WEATHER_API_ID).then(function (response) {
                        response.data.weather[0].icon=WEATHER_API_IMAGE_URL+response.data.weather[0].icon+'.png';
                        $scope.locationData.push(response.data);
                    });
                });
            }
        });
    }
})();
</code></pre>

<p>Here's how I'm trying to bind it in the view, do I need anything else than this? <code>&lt;span class="tiny"&gt;{{utc}}&lt;/span&gt;</code></p>

<p>What am I doing wrong? Is there a better way to approach this? Seems overkill for such a simple thing.</p>