angular.module('plunker', ['plunker.controllers', 'plunker.factories']);

angular.module('plunker.controllers', []);
angular.module('plunker.factories', [])
<!DOCTYPE html>
<html ng-app='plunker'>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <script src="app.js"></script>
    <script src="factory.js"></script>
    <script src="controller.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>{{state}}!</p>
    <p>{{state2}}</p>
  </body>

</html>
/* Put your css in here */

angular.module('plunker.factories')

.factory('myFactory', function(){
  var _property = 'artist';
  var service = {};
  
  service.getProperty = function(){
    return _property;
  }
  
  service.setProperty = function(property){
    _property = property; 
  }
  
  return service;
});
angular.module('plunker.controllers')

.controller('MainCtrl',['$scope', 'myFactory', function($scope, myFactory) {
    $scope.state = 'loading';
    $scope.state2 = myFactory.getProperty();
}]);