Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <div ng-app="myAppt" ng-controller="mainCtrl">
        <div class="main-container">

            <div class="child-container" ng-mousemove="onMousemove($event)">

                <div class="ks" ng-repeat="i in getNumber() track by $index" ng-style="{ 
                            'transform': getRotation($index + 1),
                            '-webkit-transform': getRotation($index + 1),
                            '-moz-transform': getRotation($index + 1),
                            '-ms-transform': getRotation($index + 1),
                            '-o-transform': getRotation($index + 1)}">

                    <div class="ks-container" ng-style="{ 
                            'background-position': bgPosition, 
                            'background-image': bgImage,
                            'transform': getRotation(1),
                            '-webkit-transform': getRotation(1),
                            '-moz-transform': getRotation(1),
                            '-ms-transform': getRotation(1),
                            '-o-transform': getRotation(1) }"></div>

                </div>
            </div>
        </div>

    </div>

CSS

.main-container {
    overflow: hidden;
    margin: 0;
    height: 100vh;
}

.child-container {
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    position: relative;
    margin: auto;
}

.child-container .ks {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    overflow: hidden;
}

.child-container .ks-container {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    left: 100%;
    top: 0;
}

JavaScript

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

myApp.controller('mainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.bgImage = 'url(http://www.larousse.fr/encyclopedie/data/images/1310226-Vincent_Van_Gogh_la_Nuit_%C3%A9toil%C3%A9e.jpg)'; //url(default-bg.jpg)';

		var section = 12;
  
    $scope.getNumber = function () {
        return new Array(section);
    }

    $scope.getRotation = function (i) {
        var hasMatrix = false,
            deg = 0,
            base = 360 / section,
            rotation;

        if (i % 2 === 0) {
            i -= 1;
            hasMatrix = true;
        }

        deg = Math.round(i * base + 1);

        if (section <= 4) {
            deg -= 1;
        }

        rotation = 'rotate(' + deg + 'deg)';

        if (hasMatrix) {
            rotation += ' matrix(-1, 0, 0, 1, 0, 0)';
        }

        return rotation;
    }

    $scope.mode = 'move';
    $scope.onMousemove = function (e) {
        console.log($scope.mode);
        if ($scope.mode === 'move') {
            $scope.bgPosition = e.pageX + 'px ' + e.pageY + 'px';
        }
    };

}]);