title: angular.js and Reveal.js My slide show displays too small
body: <p>Im using reveal.js on angular.JS ver 1.42 and yeoman scaffold  to make a slide show and i put the code exactly the way the instructions said but I get a small display, I try resizing the content of the slides, modifying the reveal css , forcing the images to resize but nothing work and inside the slide says is already big look the picture below and thanks for your help in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/5zRic.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5zRic.png" alt="enter image description here"></a>
  So I'm trying to find what can fix this issue here is my code</p>
  
  <pre><code>&lt;div class="container-fluid" &gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="reveal"  fullscreen&gt;
              &lt;!-- Wrap all slides in a single "slides" class --&gt;
              &lt;div class="slides"&gt;
                  &lt;!-- ALL SLIDES GO HERE --&gt;
                  &lt;!-- Each section element contains an individual slide --&gt;
                  &lt;section ng-repeat="slide in  slideShow.slides" &gt;
                      &lt;img  ng-src="{{slide}}" &gt;
                  &lt;/section&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the controller very simple</p>
  
  <pre><code>'use strict';
  
  
            var Reveal;
      angular.module('nwApp')
          .controller('slideShowCtrl', ['$timeout', function($timeout) {
  
              var self = this;
              self.slides = [];
              for (var i = 1; i &lt; 10; i++) {
                  var id = {};
                  id =     'https://webservice.com/nw/Slides/GCBT_ALBUMIN/00' + i + '.jpg';
                  self.slides.push(id);// Displaying Images url on ng-repeat 
              }
  
  
  
      Reveal.addEventListener('slidechanged', function(event) {
          console.log(event);
      });
  
      // slide show configuration settings 
      $timeout(function() {
  
          Reveal.initialize({
  
  
              width: 960,
              height: 700,
  
              // Factor of the display size that should remain empty around the content
              margin: 0.1,
  
              // Bounds for smallest/largest possible scale to apply to content
              //minScale: 0.2,
              maxScale: 1.5,
  
              // Display controls in the bottom right corner
              controls: true,
  
              // Display a presentation progress bar
              progress: true,
  
              // Display the page number of the current slide
              slideNumber: true,
  
              // Push each slide change to the browser history
              history: false,
  
              // Enable keyboard shortcuts for navigation
              keyboard: true,
  
              // Enable the slide overview mode
              overview: true,
  
              // Vertical centering of slides
              center: true,
  
              // Enables touch navigation on devices with touch input
              touch: true,
  
              // Loop the presentation
              loop: false,
  
              // Change the presentation direction to be RTL
              rtl: false,
  
              // Turns fragments on and off globally
              fragments: true,
  
              // Flags if the presentation is running in an embedded mode,
              // i.e. contained within a limited portion of the screen
              embedded: false,
  
              // Flags if we should show a help overlay when the questionmark
              // key is pressed
              help: true,
  
              // Number of milliseconds between automatically proceeding to the
              // next slide, disabled when set to 0, this value can be overwritten
              // by using a data-autoslide attribute on your slides
              autoSlide: 0,
  
              // Stop auto-sliding after user input
              autoSlideStoppable: true,
  
              // Enable slide navigation via mouse wheel
              mouseWheel: true,
  
              // Hides the address bar on mobile devices
              hideAddressBar: true,
  
              // Opens links in an iframe preview overlay
              previewLinks: false,
  
              // Transition style
              transition: 'default', // none/fade/slide/convex/concave/zoom
  
              // Transition speed
              transitionSpeed: 'default', // default/fast/slow
  
              // Transition style for full page slide backgrounds
              backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
  
              // Number of slides away from the current that are visible
              viewDistance: 3,
  
              // Parallax background image
              parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
  
              // Parallax background size
              parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
  
              // Amount to move parallax background (horizontal and vertical) on slide change
              // Number, e.g. 100
              parallaxBackgroundHorizontal: '',
              parallaxBackgroundVertical: ''
          });
      }, 300);
  }]);
  </code></pre>
  
  <p>As You can see I only using a ng repeat to repeat this images tags with the url ng-src where {{slide }} is a picture URL</p>
  
  <pre><code>    `  &lt;section ng-repeat="slide in  slideShow.slides" &gt;
                      &lt;img  ng-src="{{slide}}" &gt;
                  &lt;/section&gt;`
  </code></pre>
  
  <p>Finally this is my index just in case and this is done using YEOMAN</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
        &lt;link rel="stylesheet" href="bower_components/angular-material-icons/angular-material-icons.css"&gt;
        &lt;link rel="stylesheet" href="bower_components/reveal-js/css/reveal.css"&gt;
        &lt;link rel="stylesheet" href="bower_components/reveal-js/css/theme/moon.css" id="theme"&gt;
  
  
      &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /&gt;
  
      &lt;link rel="stylesheet" href="styles/main.css"&gt; 
  
    &lt;/head&gt;
    &lt;body ng-app="nwApp" &gt;
  
  
      &lt;div class="header"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-md-12 column"&gt;
                  &lt;div class="row clearfix"&gt;
                      &lt;div class="col-md-6 column"&gt;
                         &lt;h1 class="text-primary"&gt;Name Candidate&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 column"&gt;
                          &lt;img ng-src="images/logoBIdocs.png" alt="D.S.I." style='width: 125px;float:right' /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container" &gt;
      &lt;div ng-view="" &gt;&lt;/div&gt;
      &lt;/div&gt;
  
        &lt;div class="footer"&gt;
          &lt;div class="container"&gt;
              &lt;p&gt;Brand Institute, Inc. &lt;/span&gt; NW &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Google Analytics: change UA-XXXXX-X to be your site's ID --&gt;
       &lt;script&gt;
         !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
         (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
         r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
         }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
         ga('create', 'UA-XXXXX-X');
         ga('send', 'pageview');
      &lt;/script&gt;
  
      &lt;!-- build:js(.) scripts/vendor.js --&gt;
      &lt;!-- bower:js --&gt;
      &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-touch/angular-touch.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-local-storage/dist/angular-local-storage.js"&gt;&lt;/script&gt;
      &lt;!-- endbower --&gt;
      &lt;script src="bower_components/angular-material-icons/angular-material-icons.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-fullscreen-master/src/angular-fullscreen.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/reveal-js/js/reveal.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/reveal-js/lib/js/head.min.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/reveal-js/lib/js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/reveal-js/lib/js/classList.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  
          &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
          &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/services/getDataFactory.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/main.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/controllers/slideShow.js"&gt;&lt;/script&gt;
          &lt;script src="scripts/directives/slideShow.js"&gt;&lt;/script&gt;
          &lt;!-- endbuild --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>